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

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

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

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

JavaScript

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

Q&A

解決済

1回答

645閲覧

読み込んだjsonを連想配列に格納する方法

flower_tako

総合スコア20

JSON

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

JavaScript

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

0グッド

1クリップ

投稿2019/01/22 08:50

jsonで取得したをdata情報を
その後どのようにして連想配列に格納すればいいのかわからないのでご教授お願い致します。

data.js

[ {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, {"aaa":"xxx","bbb":"xxx","ccc":"xxx","ddd":"xxx","eee":"xxx","fff":"xxx"}, ]

script.js

$.ajax({ // json読み込み開始 type: 'GET', url: './data/data.json', dataType: 'json' }); var data=[];// 空の配列を用意 var I=0; var place_obj ={ "aaa": json[i].aaa, "bbb": json[i].bbb, "ccc": json[i].ccc, "ddd": json[i].ddd, "eee": json[i].eee, "fff": json[i].fff }; var place = JSON.stringify(place_obj); var data = function () { for (var i = 0; i < json.length; i++) { data = place_obj; } }; console.log(data[1].aaa);

試したこと

考えとしてはvar place_obj に1行分の情報を格納した配列を作って
その後var data にループで格納していけばよいと考えております。
(考え方も間違えておりましたご指摘頂ければと思います。)
下記コードを参考にした時はjson[i]でうまく言ってましたが
コンソールでjson[i] is undefinedとなりました。

参考にしたコード

var data = []; $.ajax({ type: 'GET', url: 'datas/test.json', dataType: 'json' }) .then( function(json) { for(var i = 0; i < json.length; i++){ data.push({ 'name': json[i].name, 'age': json[i].age }); }; for(var i = 0; i < data.length; i++){ console.log('私の名前は' + data[i]['name'] + 'です。'); console.log('年齢は' + data[i]['age'] + '歳です。'); } }, function() { console.log('読み込みに失敗しました'); } );

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

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

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

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

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

guest

回答1

0

ベストアンサー

参考にすべきは.then(関数)です。

質問文の書き方では非同期を上手く処理出来ないので.then()で包むというのもちゃんと参考するか、
もっとJavaScriptの事を勉強して非同期処理をどう処理するのか覚えましょう。

ちなみに.then(関数)を使った非同期処理を実現する機能をPromiseと呼びます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise


データの扱いに関しては下記を参考にしてください。
JavaScriptは非同期処理を実現するために、
関数やメソッドの引数にコールバック関数を設定するという思想があります。

このコールバック関数は全然別の世界に受け渡されて、
実行しても良いタイミング(Ajax通信を行い、結果が帰ってくる)によく分からない場所で実行されます。
つまり、この世界の外にはもう帰ってこれません。

これが「コールバック地獄」と呼ばれる地獄の入り口です。
コールバック関数内でやりたい事が増えると、延々とコールバック関数内のコードが肥大し読みづらくなります。
読めないコードは修正や改善も不可能で、現場では数多くの悲劇を生み出してきました。

「コールバック地獄」で調べればこのコールバック地獄とどう付き合うのか、
テクニックを含めて色々出てきますので、やりたいことが増えたら調べてみてください。

JavaScript

1$.ajax({ // json読み込み開始 2 type: 'GET', 3 url: './data/data.json', 4 dataType: 'json' 5}).then(function (data) { 6 // 確実にthen(関数)という書き方で繋げること 7 var place_obj = data[0]; // 最初の値は[0]の添字でアクセスすればいい。 8 data = data.slice(1); // 1行目のデータを捨てたいならArray.prototype.sliceを使う 9 10 // 非同期関数に一度入ると外の世界には帰ってこれないので、 11 // place_objやdataを扱いたい場合は全てこの中に記述すること 12 console.log(place_obj); 13 console.log(data); 14});

投稿2019/01/22 09:00

編集2019/01/23 03:14
miyabi-sun

総合スコア21158

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

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

flower_tako

2019/01/22 09:13

ご返答ありがとうございます。 自分でもなにがわからないのかわからない状態です。 web上にある情報や本の情報をつぎはぎして学習をしているのですがどのように学習するのがよいのでしょうか???趣旨違いとは思いますがアドバイスいただけたら嬉しいです( ; ; )
miyabi-sun

2019/01/22 10:07

ふーむなるほど、まぁちゃんとした本を一冊買って最初から最後まで頑張るしかないですね。 結局の所技術はパズルのピースなので、まずはやりたい事は置いといて、書いてある事を確実に手元で再現させることですね。 自分のやりたいことに近い部分だけ流し読みして理解するのは相当辛いですから、これを続けてると近い将来挫折すると思います。
flower_tako

2019/01/23 01:50

まさに今のやり方がそのような形になってます。 今日から本をまず1冊やって学習進めます。アドバイスありがとうございました!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問