我已经在我的本地系统中保存了一个JSON文件,并创建了一个JavaScript文件,以便读取JSON文件并打印数据。以下是JSON文件:

{"resource":"A","literals":["B","C","D"]}

假设这是JSON文件的路径:/Users/Documents/workspace/test.json。

谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?


当前回答

一个简单的解决方法是将JSON文件放在本地运行的服务器中。为此,从终端转到您的项目文件夹,并在某些端口号上启动本地服务器,例如8181

python -m SimpleHTTPServer 8181

然后浏览到http://localhost:8181/应该会显示您的所有文件,包括JSON。如果您还没有安装python,请记住安装python。

其他回答

要使用javascript读取外部本地JSON文件(data. JSON),首先要创建数据。json文件:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

然后,

在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);

有关更多信息,请参阅此参考资料。

只需使用$。getJSON和$。迭代Key /value对。 JSON文件和函数代码的内容示例:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

上面提到的所有解决方案只有在本地主机上运行本地web服务器时才有效。如果你想要在没有web服务器的情况下实现这一点,你可能需要通过使用文件上传控制来手动上传JSON文件。由于安全风险,如果没有本地服务器,浏览器将不提供此功能。

你也可以在没有本地服务器的情况下解析上传的文件。这里是示例代码,我已经实现了一个解决类似的问题。

 <div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <h2>
        <pre id="output"></pre>
    </h2>
</div>
<script type="text/javascript">
    document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
                console.log(parsedJSON);
                // your code to consume the json                    
            }
            fileReader.readAsText(this.files[0]);
        }) 
</script>

在我的情况下,我想读取一个本地JSON文件,并在桌面上的html文件中显示它,这就是我所要做的。

注意:不要尝试使用JavaScript自动上传文件,由于浏览器施加的安全限制,即使这样做也是不允许的。

您可以使用D3来处理回调,并加载本地JSON文件数据。Json,如下所示:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

您不能对本地资源进行AJAX调用,因为请求是使用HTTP发出的。

一个解决方案是运行一个本地web服务器,提供文件并对localhost进行AJAX调用。

为了帮助你编写代码来读取JSON,你应该阅读jQuery.getJSON()的文档:

http://api.jquery.com/jQuery.getJSON/