JSONを配列としてロードする

私はプロジェクトのためにPython SimpleHTTPWebserverを実行しています。そのファイルの1つは有効なJSON "file.json"です。私のjavascriptのフロントエンドのために私はJSONを配列としてロードする

{ 
    "val1": 101, 
    "val2": 202 
}

は、残念ながら、私もそれ生の状態だ内の変数にロードするファイルを取得することはできませんvar jsonFile = [['val1', 101], ['val2', 202]]

なるように配列の配列としてこれを読んでする必要があります。私はJavaScriptに完全に新しいですが、次のことを試してみました：

<html> 
<head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="http://d3js.org/topojson.v1.min.js"></script> 
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script> 
</head> 
<body></body> 
<script type="text/javascript"> 
    var mydata = JSON.parse("file.json"); 
</script> 
</html>

しかし、これはエラーをスロー：

VM89:1 Uncaught SyntaxError: Unexpected token s in JSON at position 0 at JSON.parse() at :1:6

私はJavaScriptに新たなんだと私はのように単純化したようなものを維持しようとしています（JQueryのような普通のjavascriptを使っているかどうかは気にしませんが）これが動作しない理由を理解できません。助けて！

出典

2017-03-04 jhole89

する必要があります最初にajaxでファイルをwnloadしてください。 JSON.parseはJSON文字列を解析します。 – Julian

最初にサーバー上のファイルを開き、jsonにアクセスできるようにします。

あなたがajax要求を行うとjsonを指定した場合、あなたが[[key,value]]

let x = {val1: 101,val2: 202}; 
 
console.log(Object.entries(x))

にオブジェクト {key:value}から望ましい結果を得ることができます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<html> 

<head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="http://d3js.org/topojson.v1.min.js"></script> 
    <script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script> 
</head> 

<body> 
<script type="text/javascript"> 
    $.ajax({ 
    url: "path/to/json/file", 
    type: 'GET', 
    dataType: 'json', 
    success: response => { 
     console.log(Object.entries(response)); 
    } 
    }) 
</script> 
</body> 

</html>

がObject.entries()を使用してデータを解析する必要はありません

出典

2017-03-05 06:32:32

ありがとうございました – jhole89

JSON.parseは、"{"foo":"bar"}"のようなjsonオブジェクト文字列を受け取り、jsonオブジェクトを返します。これは明らかにフォーマットされていないファイル名を渡しています。そのjsonファイルのコンテンツを取得し、コンテンツをJSON.parseにフィードする必要があります。 jqueryを追加したと仮定すると、XMLHttpRequestを使用してそのファイルを取得できます。このファイルを使用すると、リソースを非同期に取得できます（別名ajax）。あなたは番目の要求を確認する必要があり

$.ajax('/url/of/your/file.json/on/the/server', { 
    success: function(content) { 
     var json = JSON.parse(content); 
     var resultArray = Object.keys(json) 
           .map(function(key) { 
            return [key,json[key]]; 
           }) 
           .reduce(function(container,nextArray) { 
            container.push(nextArray); 
            return container; 
           }, []); 
     consle.log(resultArray); // resultArray is what you need 
    } 
});

2017-03-05 00:28:57 Dummy

JSONを配列としてロードする

答えて

関連する問題