web-dev-qa-db-ja.com

JSONファイルをJavaScriptにどのようにインポートしますか？

コンテンツを含むJSONファイルがあります

{"name" : "Conrad", "info" : "tst", "children" : [
    {"name" : "Rick" },
    {"name" : "Lynn" },
    {"name" : "John", "children": [
        {"name" : "Dave", "children": [
            {"name" : "Dave" },
            {"name" : "Chris" }      
        ]},
        {"name" : "Chris" }
    ]}
  ]};

このJSONファイルデータをJavaScriptファイル内にインポートして、最終結果を次のようにしたい

var treeData ={"name" : "Conrad", "info" : "tst", "children" : [
        {"name" : "Rick" },
        {"name" : "Lynn" },
        {"name" : "John", "children": [
                {"name" : "Dave", "children": [
                {"name" : "Dave" },
                {"name" : "Chris" }

         ] },
                {"name" : "Chris" }
         ]}
  ]};

多くのコードサンプルを試しましたが、どれも機能していません。

javascriptjqueryajaxjson
14
user3248233

ファイルのコンテンツを次のように解析します。

_var treeData = JSON.parse(fileContent);
_

ファイルの取得方法については説明しませんが、単純なXMLHttpRequestを使用してサーバーからファイルをロードできます。そのための便利なリソースを次に示します。 sing XMLHttpRequest

変更されたリンクからの抜粋：

_var treeData;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();

function reqListener(e) {
    treeData = JSON.parse(this.responseText);
}
_

以下のコメントに基づいて更新：

JSON.parse()を使用してファイルをloadすることはできません。この関数は、既存の文字列をオブジェクトに変換することしかできません（コンテンツが有効なJSON形式の場合）。

必要がある：

  1. 例えばAJAX（上記）を使用して、サーバーから変数にファイルをロードします。セキュリティ上の理由により、ローカルファイルパスを使用できません。無料の軽量として Mongoose Webサーバー これにより、ルートをローカルフォルダーにポイントし、_http://localhost/_を使用してページをロードできます。

  2. ファイルがロードされたら、コンテンツをJSON.parse()関数に渡すことができます。上記の例は、プロセス全体を示しています。コード内のリンクを実際のリンクに置き換えるだけです。

（PS：jQueryソリューションが必要な場合は、jQueryタグで質問にタグを付けてください）

10
user1693593

$.getJSON

$.getJSON( "yourjsonfile.json", function( data ) {  
    console.log( "JSON Data: " + data);
    $.each( data, function( key, val ) {
        console.log(key + "value:: " + val );
    });
});

参照： http://api.jquery.com/jquery.getjson/

6
Krish R

JSONファイルのAJAXリクエストを実行し、JSON.parseを使用して結果をtreeDataに追加します。

var treeData = JSON.parse(ajaxFunction('jsonfile.php'));

その効果のための何か...（AJAX関数によって異なります）

0
Charles John Thompson III

誰かがGULPを使用している場合、次の方法で解決できます。

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    insert = require('gulp-insert');

gulp.task('jsonConcat', function() {
  return gulp.src(['path/to/json/your-file.json'])
    .pipe(insert.prepend('treeData = '))
    .pipe(insert.append(';'))
    .pipe(concat('final-result.js'))
    .pipe(gulp.dest('path/to/destination/'));
});
0
Syed