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

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

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

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


当前回答

首先,创建一个json文件。在这个例子中,我的文件是words.json

[(“点名”:“艾”,“id”:“533”), (“点名”:“kiy”、“id”:“33”)、 (“点名”:“报告”、“id”:“33”)、 (“点名”:“报告”、“id”:“3”), (“点名”:“kiy”、“id”:“35”)、 (“点名”:“kiy”、“id”:“34”)]

这是我的代码,也就是node。js。请注意readFileSync的'utf8'参数:这使得它返回的不是Buffer(尽管JSON。Parse可以处理它),但是一个字符串。我正在创建一个服务器来查看结果…

var fs=require('fs'); var data=fs.readFileSync('words.json', 'utf8'); var words=JSON.parse(data); var bodyparser=require('body-parser'); 控制台.log(字); var express=require('express'); var app=express(); var server=app.listening(3030,listening); 函数侦听(){ console.log(“聆听..”); } app.use(express.static('website')); app.use(bodyparser.urlencoded({extended:false})); app.use(bodyparser.json());

当你想读取特定的id细节时,你可以把代码提到..

应用程序。得到(' /得到/ res:函数(req, id’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = id req params。)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');

当您作为localhost:3030/get/33输入url时,它将给出与该id相关的详细信息....你也念名字。我的json文件有类似的名称与这段代码,你可以得到一个名称详细信息....它并没有打印所有相似的名字

应用程序。得到(' /得到/ res:函数(req, name’)( var的; for (i = 0; i < words . length; + + i) ( if (words [i]。id = = req . params名称)( 发送(words [res]); ) ) 游戏机。log(“成功”); ');

如果希望读取类似的名称详细信息,可以使用这段代码。

app.get(/ /名称/:名称,功能(要求,res) { Word = words.filter(函数(val){ 返回val.name === req.params.name; }); res.send(词); console.log(“成功”); });

如果您想读取文件中的所有信息,请使用下面的代码。

app.get (' / ', sendAll); 函数sendAll(请求、响应){ response.send(单词); }

其他回答

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

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

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

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

使用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)
                           }

            }
        });
    });

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

python -m SimpleHTTPServer 8181

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

我喜欢上面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;但这里的例子更多的是展示如何使用承诺。

取决于您的浏览器,您可以访问您的本地文件。但这可能并不适用于应用程序的所有用户。

要做到这一点,您可以尝试这里的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/

一旦你的文件加载,你可以检索数据使用:

var jsonData = JSON.parse(theTextContentOfMyFile);