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

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

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

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


当前回答

你可以像ES6模块一样导入它;

import data from "/Users/Documents/workspace/test.json"

其他回答

我喜欢上面Stano/Meetar的评论。我用它来读取.json文件。 我使用Promise扩展了他们的例子。 这是同样的活塞。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

JSON的读取可以移动到另一个函数,对于DRY;但这里的例子更多的是展示如何使用承诺。

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

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

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

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

您可以使用d3.js导入JSON文件。在你的html主体上调用d3:

<script src="https://d3js.org/d3.v5.min.js"></script>

然后把这个放在你的js脚本上:

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })

您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。

这个技巧对我很有用(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):)

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

使用jQuery和ajax可以很好地读取JSON文件和操作数据

    $(document).ready(function () {
        $.ajax({
            url: 'country.json',
            type: 'GET',
            dataType: 'json',
            success: function (code, statut) {
                for (let i in code) {
                    console.log(i)
                           }

            }
        });
    });