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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

4回答

7863閲覧

jQueryで多次元配列のJSONの表示の仕方が分からないです。

ktk

総合スコア25

JSON

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2019/02/22 02:49

初歩的な質問で申し訳ありませんが以下の事がやりたいのですが回答いただければ助かります。

結果として、[テストA]を表示させたいのですがJSONの多次元配列の扱い方は全然違いますか?

jOueryとJSON初心者の為多次元配列になると混乱しています。

test.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $.ajax({ type: 'GET', url: 'http:///api/test-result? dataType: 'json', }).done(function(data){ var items = data.data; var Result= items[0].data; $("#a").append(data.items[0].Result["TestTitle"]); }); </script> </head> <body> <p id="a"></p> </body> </html>

JSONレスポンス結果

{"data":{"status":true, "message":"テスト結果の取得に成功しました", "data":{"RequestId":"000000000", "Name":"田中太郎", "Result":[{"TestTitle":"テストA","Year":2020,"PassedFlg":true}, {"TestTitle":"テストB","Year":2020,"PassedFlg":false} ] } } }

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

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

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

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

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

m.ts10806

2019/02/22 02:50

一応、起きている結果、現象、エラーなど確認してください。
Lhankor_Mhy

2019/02/22 03:02

複雑な構造体になると、初心者だけではなくてエンジニアでも混乱しますから、開発者ツールとconsole.logを使って、ひとつひとつ確認しながら進めるのがいいと思いますよ。
guest

回答4

0

開発者ツールを使って調べるのが一番です。
イメージ説明

投稿2019/02/22 03:08

Lhankor_Mhy

総合スコア35869

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

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

ktk

2019/02/22 06:07

画像付きで分かりやすく説明して頂きありがとうございました。 試してみて理解が深まりました。
guest

0

その構造だとこうでは?

javascript

1 }).done(function(data){ 2 $("#a").text(data.data.data.Result[0].TestTitle); 3 });

投稿2019/02/22 02:59

yambejp

総合スコア114583

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

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

ktk

2019/02/22 06:08

動かしてみて解決しました。ありがとうございました。
guest

0

js

1 var items = data.data.data; 2 var Result= items.Result; 3 4 $("#a").append(Result[0]["TestTitle"]);

投稿2019/02/22 02:57

編集2019/02/22 03:02
kei344

総合スコア69366

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

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

kei344

2019/02/22 03:03

.dataが少なかったので修正。
ktk

2019/02/22 06:08

動かしてみて解決しました。ありがとうございました。
guest

0

ベストアンサー

console.log()でコンソール出力して確認していくと確実です。

js

1j = `{"data":{"status":true, 2 "message":"テスト結果の取得に成功しました", 3 "data":{"RequestId":"000000000", 4 "Name":"田中太郎", 5 "Result":[{"TestTitle":"テストA","Year":2020,"PassedFlg":true}, 6 {"TestTitle":"テストB","Year":2020,"PassedFlg":false} 7 ] 8 } 9 } 10}`; 11d = JSON.parse(j); 12//ここがdoneで拾ったデータの状態 13console.log(d); 14/* 15{ data: 16 { status: true, 17 message: 'テスト結果の取得に成功しました', 18 data: { RequestId: '000000000', Name: '田中太郎', Result: [Array] } } } 19*/

見た感じ、オブジェクトは.、配列(Array)は行番号(0~)で辿っていく原則はおおよそ理解されているようなので、そこを正確に辿っていきます。

ただ、いきなり全て辿るのは簡単ではないので、1段階ずつ確認していくと良いです。

js

1console.log(d); 2console.log(d.data); 3console.log(d.data.status); 4console.log(d.data.data); 5console.log(d.data.data.Result); 6console.log(d.data.data.Result[0]); 7console.log(d.data.data.Result[0].TestTitle); 8//最後だけ出力結果↓ 9//テストA

投稿2019/02/22 03:02

m.ts10806

総合スコア80765

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

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

ktk

2019/02/22 06:07

一通り試して理解を深める事が出来ました。 ありがとうございました。
m.ts10806

2019/02/22 06:13

解決された用で何よりです。 これは「デバッグ」という手法の1つです。 既にコメントもあるように構造が複雑なものは熟練者でも一発で欲しいデータへの到達は難しいです。 私も自分で制御しているデータであっても確実にするために1つ1つ、回答に書いたように確認していますので、参考にしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問