小开

最佳答案

当使用HTTP请求时，不能对本地资源进行AJAX调用。

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

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

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

小开

如果你可以运行本地web服务器(如上所述克里斯·P)，如果你可以使用jQuery，你可以尝试http://api.jquery.com/jQuery.getJSON/

小开

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

要做到这一点，你可以尝试下面的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/

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

var jsonData = JSON.parse(theTextContentOfMyFile);

小开

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

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

然后,

在脚本源中提到json文件和javascript文件的路径

 <script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascript.js"></script>

从json文件获取对象

 var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

更多信息，参见这个引用。

小开

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

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

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

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

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

小开

来自硬盘的.json文件的加载是一个异步操作，因此它需要指定一个回调函数在文件加载后执行。

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("/Users/Documents/workspace/test.json", function(text){
var data = JSON.parse(text);
console.log(data);
});

此函数也适用于加载.html或.txt文件，通过将mime类型参数重写为"text/html"， "text/plain"等。

小开

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

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

小开

如果你使用本地文件，为什么不把数据打包成一个js对象呢?

data.js

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

没有xmlhttprequest，没有解析，只是直接使用MyData.resource

小开

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

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"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');
console.log(words);
var express=require('express');


var app=express();


var server=app.listen(3030,listening);


function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

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

 app.get('/get/:id',function(req,res){
	

var i;
		 

for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.id){
res.send(words[i]);
}
}
console.log("success");
	  

});

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

 app.get('/get/:name',function(req,res){
	

var i;
		 

for(i=0;i<words.length;++i)
{
if(words[i].id==req.params.name){
res.send(words[i]);
}
}
console.log("success");
	  

});

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

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
return val.name === req.params.name;
});
res.send(word);
			 

console.log("success");
	  

});

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

app.get('/all',sendAll);
 

function sendAll(request,response){
response.send(words);


}

小开

当在Node.js或在浏览器中使用require.js时时，你可以简单地做:

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

注意:文件加载一次，后续调用将使用缓存。

小开

你可以使用XMLHttpRequest()方法:

    var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
//console.log("Json parsed data is: " + JSON.stringify(myObj));
}
};
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

您可以使用console.log语句(注释掉)查看myObj的响应。

如果你了解AngularJS，你可以使用$http:

MyController.$inject = ['myService'];
function MyController(myService){


var promise = myService.getJsonFileContents();


promise.then(function (response) {
var results = response.data;
console.log("The JSON response is: " + JSON.stringify(results));
})
.catch(function (error) {
console.log("Something went wrong.");
});
}


myService.$inject = ['$http'];
function myService($http){


var service = this;


service.getJsonFileContents = function () {
var response = $http({
method: "GET",
url: ("your_file_name.json")
});


return response;
};
}

如果文件在不同的文件夹中，请提到完整的路径而不是文件名。

小开

你可以使用D3来处理回调，并加载本地JSON文件data.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>

小开

您必须创建一个新的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);
});

小开

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

python -m SimpleHTTPServer 8181

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

小开

< p > < br > 正如许多人之前提到的，使用AJAX调用这是行不通的。然而，有一种方法可以绕过它。使用input元素，你可以选择你的文件

所选文件(.json)需要有这样的结构:

[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]

< br >

<input type="file" id="get_the_file">

然后你可以使用FileReader()使用JS读取文件:

document.getElementById("get_the_file").addEventListener("change", function() {
var file_to_read = document.getElementById("get_the_file").files[0];
var fileread = new FileReader();
fileread.onload = function(e) {
var content = e.target.result;
// console.log(content);
var intern = JSON.parse(content); // Array of Objects.
console.log(intern); // You can index every object
};
fileread.readAsText(file_to_read);
});

小开

使用获取API是最简单的解决方案:

fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));

它在Firefox中工作完美，但在Chrome中你必须自定义安全设置。

小开

< br > < p >非常简单。将你的json文件重命名为“。js”而不是“。json”

<script type="text/javascript" src="my_json.js"></script>

所以正常地遵循你的代码。

<script type="text/javascript">
var obj = JSON.parse(contacts);

然而，只是为了信息，我的json内容看起来像下面的剪辑。

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

小开

我把Stano的优秀的答案和包装在一个承诺。如果你没有像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>'
});

小开

只需使用$。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)
}
})
});

小开

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

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

小开

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

小开

上面提到的所有解决方案只有在本地主机上运行本地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自动上传文件，由于浏览器施加的安全限制，即使这样做也是不允许的。

小开

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


}
});
});

小开

2021解决方案(适用于Chrome 91+)

导入JSON文件的JS文件应该是一个模块:

<script type="module" src="script.js"></script>

然后在script.js中导入你的json文件:

import data from "./data.json" assert { type: "json" };

你可以检查数据是否被console.log(data)加载

Source .

小开

您可以使用fetch()在async await的帮助下完成此操作。这是从url获取数据的最新和最安全的方式。

const url = "../asset/videoData.json";


const fetchJson = async () => {
try {
const data = await fetch(url);
const response = await data.json();
} catch (error) {
console.log(error);
}
};

你也可以使用它从外部url获取数据。

小开

只是想提供另一种方法，因为以上所有对我来说都太复杂了。适用于我的Chrome版本95.0.4638.54

只是一些简单的js代码

//read json document and remove the new line
var object = JSON.stringify(document.activeElement.textContent.replaceAll('\n',''));


//parse the string to json... don't know why but oje json.parse is not enough..
var json = JSON.parse(JSON.parse(object));


//read your json
json.items[0].contactInfo.firstName


//enjoy

测试json:

{
"items": [
{
"type": "test1",
"id": "test1",
"name": "test1",
"entityId": "test1",
"active": true,
"contactInfo": {
"company": "test1",
"firstName": "test1",
"email": "test1"
}
},
{
"type": "test2",
"id": "test2",
"name": "test2",
"entityId": "test2",
"active": true,
"contactInfo": {
"company": "test2",
"firstName": "test2",
"email": "test2"
}
}
]
}

小开

将JSON文件转换为.js文件，并将JSON分配给一个变量或const，然后在你的主javascript文件中引用它。

小开

我已经阅读了上面的内容，并注意到通常在项目中有人想要加载多个json文件。在某些情况下是一个巨大的，在某些情况下是一个json文件目录;(否则你必须先生成一个列表才能下载它们)。如果整个项目都是这样，就会变得很混乱。如果json文件中的数据之间有很多关系，这可能会很麻烦。

显然，这都可以用上面的方法来完成，要么把它们做成.js文件，要么通过某种本地抓取来检索它们。

然而，我发现一个有用的替代方案(如果你不想要一个有层次的服务器端解决方案)是首先在Sql Lite数据库中加载你所有的数据。这使得管理更多的数据也更容易一些，你只有一个文件，所有的数据等等。

然后使用web程序集加载sqlite数据库，然后使用常规查询查询数据客户端。这些都可以在客户端完成

下面是一个例子:https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts(被编译到客户端解决方案的typescript文件)。

在读/写站点中，你可以为每个用户提供一个sqlite数据库，这样你缓存的数据对于该用户是唯一的，等等。

裁判:https://github.com/sql-js/sql.js

如何在JavaScript中读取外部本地JSON文件?

2021解决方案(适用于Chrome 91+)