質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

2038閲覧

typescriptにてオブジェクトのインデックス指定ができない

leeev

総合スコア20

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/06/20 05:12

編集2021/06/20 07:57

typescriptにて以下の処理をしたいのですが、newItem[columns[c]]にてエラーになってしまいます。
これを解決するためにはどのようにしたらよいでしょうか。
res.listにはttl,eisbn,url以外にも要素が含まれており、この3つだけ抽出し新たなオブジェクトにしたいです。

const parsedItems = []; const columns = ["ttl","eisbn","url"]; .map((c) => res.column.indexOf(c)); //resのcolumnからttl,eisbn,urlの要素番号を取得 for (const item of res.list) { const newItem = {}; columns.forEach((c) => { //colunmsに格納されたttl,eisbn,urlの要素番号を指定してこの3つだけ取得 newItem[columns[c]] = item[c]; //ここでエラー }); parsedItems.push(newItem);

response.json(一部分)

{ "column":["id","url","img","eisbn","date","ttl","ttl_kana","athr","dprc","bprc","ahid_id","jun_id","cpn_id","ser_id","lbl_id","s_rec","s_new","s_res","s_frc","f_adlt","fc1_id","fc2_id","fc3_id","viewer_id","viewer_url"], "list":[ [1,16749340,"non",9784047366572,0,"浅草鬼嫁日記 あやかし夫婦は今世こそ幸せになりたい。 6","non","藤丸豆ノ介",-1,0,"B's-LOG COMICS",1,0,10000,1000,0,0,0,0,0,"7月1日",0,1,1,"http://search.books.rakuten.co.jp/bksearch/dt/g001/bathr%C6%A3%B4%DD%C6%A6%A5%CE%B2%F0/?s=2"], [2,16749316,"non",9784047366763,0,"虐げられし令嬢は、世界樹の主になりました 1","non","永倉 早",-1,0,"B's-LOG COMICS",1,0,10000,1000,0,0,0,0,0,"7月1日",0,1,1,"http://search.books.rakuten.co.jp/bksearch/dt/g001/bathr%B1%CA%C1%D2%A1%A1%C1%E1/?s=2"], [3,16749314,"non",9784047366770,0,"地味で目立たない私は、今日で終わりにします。 3","non","住吉 文子",-1,0,"B's-LOG COMICS",1,0,10000,1000,0,0,0,0,0,"7月1日",0,1,1,"http://search.books.rakuten.co.jp/bksearch/dt/g001/bathr%BD%BB%B5%C8%A1%A1%CA%B8%BB%D2/?s=2"], [4,16749313,"non",9784047366787,0,"薬師の伯爵令嬢は伝説の仔竜に愛される 2","non","Luna.M",-1,0,"B's-LOG COMICS",1,0,10000,1000,0,0,0,0,0,"7月1日",0,1,1,"http://search.books.rakuten.co.jp/bksearch/dt/g001/bathr%4C%75%6E%61%2E%4D/?s=2"], [5,16749318,"non",9784047366794,0,"妹に婚約者を譲れと言われました 最強の竜に気に入られてまさかの王国乗っ取り? 4","non","hi8mugi",-1,0,"B's-LOG COMICS",1,0,10000,1000,0,0,0,0,0,"7月1日",0,1,1,"http://search.books.rakuten.co.jp/bksearch/dt/g001/bathr%68%69%38%6D%75%67%69/?s=2"], 以下略

エラー文

型 'any' の式を使用して型 '{}' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。

試したこと
以下のようにキーを指定してみたりしましたが、うまくいきませんでした。

const newItem = { isbn: String, title: String, url: String, };

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

やりたいことはちょっとつかめてないですが、コードを見る限り

typescript

1const columns = ["title","isbn","url"]; 2 for (const item of res.list) { 3 const newItem = {}; 4 columns.forEach((c) => { 5 newItem[c] = item[c]; // このように修正してみたらどうですか? 6 });

なぜこうじゃないかと思ったのが、columns.forEachのとこを誤解されているのでは?と思っています。

typescript

1columns.forEach((c)=> // このcは配列のindexではなくて、要素を示します。

columns.forEach((c)=>{}) と書くと、forEachは、columnsの要素を取り出し引数に渡された関数に渡します。ここで渡されるのはcolumnsのインデックスではなくて、あくまでも要素です。つまり、["title","isbn","url"]のインデックスが0とか1とか2のが渡されるのではなく要素の文字列である"title","isbn","url"が渡されます。

なので

tyepscript

1newItem[columns[c]]

というのはコード見る限り、不自然です。数字がインデックスであるはずの配列に文字列をインデックスにしようとしていますから。

追記

コメントの分や質問文の方を確認いたしました。ご回答いたします。なるほど、純粋に型エラーさえ直せば上手く実行できそうです。

typescript

1 const newItem : {[key: string]: string|number} = {};

のような型注釈を入れてみて下さい。これでおそらく解決するでしょう。
また途中は、

typescript

1 newItem[res.column[c]] = i;

がおそらく正しいように思います。

ただし、 {[key: string]: string|number}という型は、ちょっとあんまり限定していない方ではありますが。

投稿2021/06/20 05:42

編集2021/06/20 14:40
nobkz

総合スコア320

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

leeev

2021/06/20 07:52 編集

回答ありがとうございます。 自分の質問内容に大分不備がありました。 やりたいこととしては、 for (const item of res.list) { const newItem = {}; columns.forEach((c) => { //colunmsに格納されたttl,eisbn,urlの要素番号を指定してこの3つだけ取得 newItem[columns[c]] = item[c]; //ここでエラー }); この部分でforEach文でcolumnsに格納されたttl,eisbn,urlの要素番号を順に取り出し、res.listのttl,eisbn,urlだけ抽出して新しいオブジェクトにしてparsedItemsに格納したいです。
nobkz

2021/06/20 08:53

なるほど。回答に追記致します。
leeev

2021/06/23 01:44

ご丁寧にありがとうございます。 無事解決できました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問