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

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

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

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

422閲覧

JavascriptでネストしているJSONオブジェクトからfor文+変数でデータを取り出す方法が知りたいです!!

koppesan

総合スコア1

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2グッド

0クリップ

投稿2024/06/09 17:16

実現したいこと

wolfxという地震情報APIから受信したJSONが

コード { "No1": { "Title": "震源・震度情報", ... }, "No2": { "Title": "震源・震度情報", ... } }

↑こんな形をしていて(読みやすいように加工してあります)
1段目がNo1、No2、No3...と続いていき、各"Title"部分のデータがほしいので

コード for(let i=0;i<listdata.length;i++){ const listItem = document.createElement('li'); listItem="<h3>"+data.[i].Title+"</h3>"; dataList.appendChild(listItem); }

こんな感じのfor文で取り出したいです
最悪、

data.[i].Title

の部分をどう変えればよいかだけでもいいのでお願いします!!

追加情報:
data変数にjsonデータが入っています
iはfor文を繰り返した回数です

発生している問題・分からないこと

data.[i].Titleをどう変えればfor文と変数の組み合わせで効率よくデータが取り出せるか

該当のソースコード

Javascript

1//上に貼ってあるのとほぼ同じです 2for(let i=0;i<listdata.length;i++){ 3 console.log() 4 const listItem = document.createElement('li'); 5 listItem.innerHTML = '<h3>'+data.i.Title+'</h3>'; 6 dataList.appendChild(listItem); 7 }

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

試したことdata.[i].Titleを色々変えてみる

1-1. data.[i]の中身

undefined

1-2.data.[i].Titleの中身

undefined

2.data.No1.Titleで直接指定

震源・震度情報

正しく取れた(けれどNo50まであるため作るのは難しい)
3.dataの中身

{ "Title": "震源・震度情報", "EventID": "20240609154154", "time": "2024/06/09 15:41", "time_full": "2024/06/09 15:41:54", "location": "沖縄本島近海", "magnitude": "3.9", "shindo": "2", "depth": "50km", "latitude": "26.7", "longitude": "127.8", "info": "この地震による津波の心配はありません。" }

補足

使っているもの
Visual Studio Code

  • バージョン: 1.90.0
  • コミット: 89de5a8d4d6205e5b11647eb6a74844ca23d2573
  • 日付: 2024-06-04T19:38:26.167Z
  • OS: Linux arm64 6.6.31+rpt-rpi-v8

→Liveserverという拡張機能を使い随時確認しながらプログラムを作成していました
Chromium

  • 124.0.6367.73(Official Build)Built on Debian , running on Debian 12 (64 ビット)
odamio, ams2020👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

まずは、オブジェクトデータを配列的に扱えるようにしましょう。
こういった、forを使ったりして扱うデータの形式の、代表格は、配列と呼ばれます。
対して、オブジェクト型という形式も存在しますが、
今回の、JSONによって取得したデータは、オブジェクト型のため、
そのままでは、forで扱うことができません。
よってオブジェクトを配列っぽく扱えるようにしなくてはなりません。
JavaScript オブジェクト 配列として扱うなどと検索すればいろいろと方法がでてきます。

以上を踏まえて、下記のようにします。

javascript

1const data = hoge; // APIから取得したJSON文字列をオブジェクトに変換したデータを格納 2 3// オブジェクトを直接配列的に扱うメソッドを使う 4for (const [key, obj] of Object.entries(data)) { 5 console.log(`${key}: ${obj.Title}`); // objに、Titleなどが格納されたオブジェクトが格納されているため、obj.Titleで、タイトル文字列が取得できる 6 // また、他の要素も、obj.EventIDなどで取得できる 7}

投稿2024/06/09 17:39

編集2024/06/09 17:44
miyabi_takatsuk

総合スコア9555

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

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

koppesan

2024/06/09 18:06

ありがとうございます!!!...こんな夜遅くなのに... そして丁寧な回答...助かります! 配列として扱おうとしたら、No1~No50だけが配列に入ってしまったことがあって諦めてました... 無事プログラムが動くようになりました 初めての質問でしたが丁寧に答えてくださってありがとうございました! ベストアンサーにさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.40%

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

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

質問する

関連した質問