Question

我有一个内容为

的JSON文件

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

我想在JavaScript文件中导入此JSON文件数据，并且最终结果如

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

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

我尝试了很多代码示例，但没有一个有效。

Answer 1

解析文件的内容，如下所示：

var treeData = JSON.parse(fileContent);

您没有描述如何获取文件，但可以使用简单的XMLHttpRequest将其从服务器上加载。这是一个有用的资源： Using 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() 加载文件。此函数只能将现有字符串转换为对象（如果内容采用有效的JSON格式）。

你需要：

使用例如AJAX将文件从服务器加载到变量（如图所示）。出于安全原因，您无法使用本地文件路径。设置本地服务器以运行您的页面，例如免费轻量级Mongoose web server。这会让您将根指向您的本地文件夹，然后使用http://localhost/
加载文件后，您可以将内容传递给JSON.parse()功能。上面的例子显示了整个过程。只需在代码中替换实际链接即可。

（PS：如果你想要一个jQuery解决方案，记得用jQuery标签标记你的问题）

Answer 2

$.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/

Answer 3

执行JSON文件的AJAX请求，然后使用JSON.parse将结果添加到treeData中。

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

有效的东西......（根据您的AJAX功能而有所不同）

Answer 4

如果有人使用GULP，那么您可以在这里解决：

sort

如何将JSON文件导入JavaScript？

4 个答案: