如何将JSON文件导入JavaScript？

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将其从服务器上加载.这是一个有用的资源: 使用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格式).

你需要:

1. 使用例如AJAX将文件从服务器加载到变量(如图所示).出于安全原因,您无法使用本地文件路径.设置本地服务器以运行您的页面,例如免费的轻量级Mongoose Web服务器.这将允许您将根指向本地文件夹,然后使用加载页面http://localhost/

2. 加载文件后,您可以将内容传递给该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 功能而有所不同）