如果你能运行本地web服务器(就像Chris P上面建议的那样)，如果你能使用jQuery，你可以试试http://api.jquery.com/jQuery.getJSON/

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

我接受了斯塔诺精彩的回答，并把它包装成一个承诺。如果你没有像node或webpack这样的选项来从文件系统加载json文件，这可能会很有用:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

你可以这样调用它:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

既然你有一个web应用程序，你可能有一个客户端和一个服务器。

如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，这意味着您只有客户端。出于安全原因，浏览器不应该允许您这样做。

然而，正如lauhub上面解释的那样，这似乎是有效的:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

另一个解决方案是在你机器的某个地方设置一个web服务器(在windows中很小，在linux中很小)，并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。

将JSON文件转换为.js文件，并将JSON分配给一个变量或const，然后在你的主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(单词); ｝