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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

2回答

5949閲覧

JavaScriptでJSON形式で保存したファイルを変数に読み込みたい。

Satochan24

総合スコア113

JSON

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

0クリップ

投稿2016/01/05 05:34

PHPのコードで、JSON形式で保存したファイル、
array.jsonがあるのですが、
このファイルをJavaScroiptのコードで読み込むのが
うまくいきません。

PHPなら、
file_get_contents("ファイル名");
で読み込みできたのですが、
JavaScroiptだと、少し手間がかかるみたいで、

FileReader オブジェクトを使うやり方を調べたのですが、、
似たようなケースのサンプルが見つからず、
jQueryのやり方のやり方を見つけ、下記のように試したのですが、
読み込み出来ていないようです。

何か原因あるいは、ファイル読み込み方法が分かる方が
おりましたら、教えてください。

$(function(){ $.ajax({ url:'array.json', dataType:'json', }).done(function(test){ console.log("success"); var list2 = JSON.parse(test); document.write(list2); }); });

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

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

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

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

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

guest

回答2

0

ベストアンサー

var list2 = JSON.parse(test);

dataType:'json' なら JSON は既に parse 済みなのではないでしょうか。
console.log(test);console.log(typeof test); で変数 test の内容を確認してみて下さい。


(2016/01/05 18:30追記)

私の環境では下記コードで問題なく機能しました。
ローカルテストで file:// スキームを使っているとか、fail() でエラー内容を出力して検証してみてはいかがでしょうか。

JavaScript

1'use strict'; 2jQuery(function (jQuery) { 3 jQuery.ajax({ 4 url:'array.jsonq', 5 dataType:'json', 6 }).done(function(object){ 7 console.log('done'); 8 console.log(object); 9 }).fail(function (error) { 10 console.log(error.status + ' ' + error.statusText); 11 console.log(error); 12 }); 13});

Re: Satochan24 さん

投稿2016/01/05 06:18

編集2016/01/05 09:32
think49

総合スコア18156

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

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

Satochan24

2016/01/05 06:29

console.log("success");のところに、onsole.log(test);とかでしょうか? 何もコンソールログは出てこないですね。
think49

2016/01/05 08:14

何も出てこないとは「空文字」が出力さえるという事でしょうか。 その場合はJSONの読み込みが出来ていないのではない事になります。
Satochan24

2016/01/05 08:50

回答有難うございます。 そうですね。JSONファイルの読み込みで失敗しているんだと思います。
think49

2016/01/05 09:01

結局、console() の出力は出来ているのでしょうか。コンソールが実行されていないのか、コンソールが実行されているのかで切り分けが変わってくると思います。 「array.json がそこにあるのか」「開発者ツールorFiddlerで見てリクエストが行われているのか」等々
Satochan24

2016/01/05 09:11

FireFoxのF12を押して、コンソールタブで、出力を見ているのですが、 何も表示されないですね。 successの位置以外では表示されたので(配列をtypeofしたら、objectと表示) done.(function(test){...の個所自体、機能してないみたいです。。。
think49

2016/01/05 09:33

私の環境では問題なく機能しました(親記事にテストコード追記)。 fileスキームでテストしているとか、存在しないURLを指定しているとか、ケアレスミスも疑ってみてください。
Satochan24

2016/01/06 01:42

回答ありがとうございます。 提示して頂いたコードを試したら、下記のようにコンソールログが出力されました。 (array.jsonq は、array.json に名前修正しましたが…) これは、ファイ読み込み成功しているログと考えていいのでしょうか? 200 OK Object { readyState: 4, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 他 11 個... }
think49

2016/01/06 01:57 編集

コンソールには実行行が表示されるので何行目の console.log が出力されたのかを見て確かめてください。 繰り返すようですが、fileスキームでテストしてないですよね? fileスキームでローカルテストしたら私の環境でも再現できます。 ローカルテストならHTTPサーバを立てて http://127.0.0.1/ でテストしなければHTTPリクエストが正しく発行できません(fileスキームでは通信が発生しないので無理なのです)。
Satochan24

2016/01/06 04:10

回答有難うございます。コンソールの実行行を見ると、やはり、failの方が実行されているようです。 fileスキーム?調べたのですが、いまいちわかりませんでした。 ローカルにHTTPサーバ立てて、file:// でアドレスを指定しているということでしょうか? HTTPサーバは、検証用が存在してて、そこにhtmlファイルがあり、同じ階層に array.jsonも存在しています。 通常の環境で使用しているはずですが…
think49

2016/01/06 04:29

例えば、アドレスバーで file:///C:/www/test.html のように表示されているなら Ajax が機能しないという事です。 http:// で始まるURLなら問題はありません。 array.json の内容が不正なJSONフォーマットの場合に再現できました。 fail() 第一引数の responseText を JSON.parse してみるとはっきりすると思われます。 それから、array.json の中身を [0,1,2,3] にして上手くいくか確かめてみてください。
Satochan24

2016/01/06 05:41

回答有難うございます。 >fail() 第一引数の responseText を JSON.parse してみる 出力の仕方がよくわかりませんでした。 array.jsonの中身を変えたら成功したときのログが表示されるようになりました。 しかし、そうすると、array.jsonファイルの中身が不正ということになりますが、 PHPでjson_encodeをしてファイルに書き込んでいるだけですが、 読み込めないJSON形式もあるということでしょうか?
think49

2016/01/06 06:02

json_encode() もしくは出力過程の他のコードに問題があるのでしょう array.json の中身を http://json.parser.online.fr/ に貼り付けて不正な箇所がどういう過程で出力されるのか、PHPのコードから特定してみてください
Satochan24

2016/01/06 06:19

回答有難うございます。 Parse Error: : 0, "year": 0},{ "access_type と出たのですが、カンマを入れたことが問題なのでしょうか? 確かに、PHPで file_put_contents($file, json_encode($data,JSON_NUMERIC_CHECK) . ",", FILE_APPEND); のように、カンマを挿入して、whileでループさせています。 でも、通常のJSONファイルも、カンマで区切られているかと…
think49

2016/01/06 06:28 編集

コードを実行すれば自ずと分かると思います。 var obj = {a:1},{b:2},{c:3}; // SyntaxError: Unexpected token { var obj = ({a:1},{b:2},{c:3}); console.log(obj); // {c:3}
Satochan24

2016/01/06 07:22

全体を〔〕でくくったら、一応、読み込みはできたようなのですが、 var list2 = JSON.parse(test); のところで、 SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data になってしまいました。 JSON.Parseが機能するように、中身を整えてやる必要があるということでしょうか?
think49

2016/01/06 07:36

カンマ演算子でオブジェクト初期化子を区切った場合、一番最後のオブジェクトが評価され、それ以外のオブジェクトは破棄されます。 それは望む形ではないので、一つの変数に複数のオブジェクトを格納するにはどうすればいいと思うかを考えていただきたかったのです。 もう答えをいってしまいますが、配列にして下さい。
Satochan24

2016/01/06 07:46

dataTypeをjsonではなく、配列にするということでしょうか?
Satochan24

2016/01/06 09:55

変数testは既にオブジェクトなので、 変換して、result2まで加工できたのですが、 関数の外から、result2が見れなくて困っています。 グローバル変数だから、見れると思ったのですが… 何か解決策ありますでしょうか? var result2 = []; $(function(){ $.ajax({ url:'array.json', dataType:'json', }).done(function(test){ console.log("success"); console.log(typeof result); //document.write(data); //var list2 = JSON.parse(test); //すでにtestはオブジェクト var keys2 = Object.keys(test[0]); for (var i = 0; i < test.length; i++) { for (var j = 0; j < keys2.length; j++) { var key = keys2[j]; if (typeof result2[j] == 'undefined') { result2[j] = [ key == 'access_type' ? 'Month' : key ]; } result2[j].push(test[i][key]); } } //document.write(result2);//ここでは見れる }); //document.write(result2);ここでは見れない });
Satochan24

2016/01/07 05:02

回答ありがとうございました。 リンク先も見てみましたが、少し難しかったので、 そういえば、最初に自分で調べたページにもDeferredを使ってたなぁと思い http://nvnote.com/google-chart-scatter-create-from-json/ のページを参考に修正してみたら、何とかうまく動きました。 こんな感じです。 Deferredの部分があまりまだよくわかってませんが、とりあえずこれで 解決としたいと思います。 有難うございました。 function drawChart() { var df = $.Deferred(); $(function(){ $.ajax({ url:'array.json', dataType:'json', }).done(function(data_j){ console.log("success"); console.log(typeof result); var keys = Object.keys(data_j[0]); for (var i = 0; i < data_j.length; i++) { for (var j = 0; j < keys.length; j++) { var key = keys[j]; if (typeof result[j] == 'undefined') { result[j] = [ key == 'access_type' ? 'Month' : key ]; } result[j].push(data_j[i][key]); } } df.resolve(); }).fail(function(){ console.log("error"); }); }); df.done(function(){ var data = google.visualization.arrayToDataTable(result); var options = { title: 'test', hAxis: {title: '月'}, vAxis: {title: 'number', minValue: 0, maxValue: 50}, legend: 'none' }; var chart = new google.charts.Line(document.getElementById('chart_div')); chart.draw(data, options); }); }
guest

0

ひょっとして、実現したいのは、下記の実装例のような事ですか?

JSONファイルの読込

◆ページのHEAD部に記載

HTML

1<script type="text/javascript"> 2 function ファイル読込(ファイル名, 読込後処理名) { 3 var 読込後処理 4 = new Function("引数", "return " + 読込後処理名 + "(引数)"); 5 var httpObj = new XMLHttpRequest(); 6 httpObj.open("GET", ファイル名, true); 7 httpObj.onreadystatechange = function() { 8 if (httpObj.readyState == 4) { 9 読込文 = httpObj.responseText; 10 読込後処理(読込文); 11 } 12 } 13 httpObj.send(null); 14 } 15</script>

◆子ファイル(called/called-json.json)の内容

{ "学生": [ { "番号": "123456", "氏名": "鈴木太郎", "学部": "工学部" }, { "番号": "987654", "氏名": "佐藤花子", "学部": "文学部" }, { "番号": "111111", "氏名": "佐藤二郎" } ] }

◆読込と配列化

JavaScript

1<script> 2 function JSON表示(読込文) { 3 var 学生番号 = new Array(); // A 4 var 学生氏名 = new Array(); 5 var 学生学部 = new Array(); 6 7 読込文 = 読込文.replace(/[\n\r]/g,""); // B 8 var 学生表 = eval("(" + 読込文 + ")"); // C 9 10 var 学生数 = 学生表.学生.length; 11 for (var i = 0; i < 学生数; i++) { 12 学生番号[i] = 学生表.学生[i].番号; // D 13 学生氏名[i] = 学生表.学生[i].氏名; 14 学生学部[i] = 学生表.学生[i].学部; 15 } 16 17 var 表示内容 = "学生数=" + 学生数 + "<br>"; 18 for (i = 0; i < 学生数; i++) { 19 表示内容 += "学生番号[" + i + "] = " + 学生番号[i] 20 + " 学生氏名[" + i + "] = " + 学生氏名[i] 21 + " 学生学部[" + i + "] = " + 学生学部[i] + "<br>"; 22 } 23 document.getElementById('表示場所').innerHTML = 表示内容; 24 } 25</script> 26<p><input type="button" value="表示" 27 onClick="ファイル読込('called/called-json.json', 'JSON表示')"></input></p>

今回は数回の試行錯誤の結果、結構長いですが
javascript json ファイル読み込み 変数 代入
というキーワードでググって見つけました。

ご参考になれば幸いです。

投稿2016/01/05 06:01

pi-chan

総合スコア5936

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

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

Satochan24

2016/01/05 06:33

回答、有難うございます。 使えるのかどうか、内容確認中ですが、 input属性を使用して読み込むやり方ではなく、できればWebページ開いたときに 表示させたいので、なかなか、そのサンプルが見つからい状況ですね。
ipadcaron

2016/01/05 07:44

参考url見ると確かにinput属性です。 自分が提示したコード自体が ready メソッドの書き方ですよ。 $(function() { ファイル読込(ファイル名、読み込み後処理名); }); と、ご自分が提示したコードが記述されてる場所に上記コードを丸ごと置換し、 読み込み後処理名のメソッドを記述すれば動作します。 さんぷるが見つからない、とのことですが、提示されたコードはどこで入手されたものですか。 それと、array.json は、「できればWebページ」と同じ場所に配置しないと読み込めません。
Satochan24

2016/01/05 07:56

回答有難うございます。 下記のサイトを参考にしました。 http://nvnote.com/google-chart-scatter-create-from-json/ array.jsonは、Webページと同じフォルダ内に置いてます。 どちらにしても、PHPよりも、JavaScriptのファイル読み込みは、 多少、面倒なようですね。
Satochan24

2016/01/05 09:29

提示して頂いたページですが、 「読込後処理名」と、「読込後処理」は、同じ名前(変数?)では ダメでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問