关于html：在JavaScript中读取一个简单的JSON文件

Reading a simple JSON File in JavaScript

本问题已经有最佳答案，请猛点这里访问。

我有一个JSON文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
"residents": [
{
"name" :"Jacob",
"title" :"King",
"gender" :"Male",
},
{
"name" :"Luthor",
"title" :"Prince",
"gender" :"Male"
},
{
"name" :"Mileena",
"title" :"Princess",
"gender" :"Female"
},
]
}

我想用JavaScript来阅读JSON，但当然，我不知道。我该怎么处理这个问题？

这取决于您使用的环境。如果使用node.js，则应使用api-file read读取此文件然后应该使用json.parse在对象中分析它。

如果您在浏览器中工作，并且某些服务器具有此文件的静态路径，则可以使用Ajax获取此文件。

在这两种情况下，您都应该执行以下步骤：

获取文件为字符串

解析为对象

相关讨论

试试这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!docTpye html>
<html>
<head>

var data={
"residents": [
{
"name" :"Jacob",
"title" :"King",
"gender" :"Male",
},
{
"name" :"Luthor",
"title" :"Prince",
"gender" :"Male"
},
{
"name" :"Mileena",
"title" :"Princess",
"gender" :"Female"
},
]
}
for(var i=0;i<data.residents.length;i++){
console.log(data.residents[i].name);
alert(data.residents[i].name);
}

</head>
<body>
</body>
</html>

首先，您的JSON字符串有错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
"residents": [
{
"name" :"Jacob",
"title" :"King",
"gender" :"Male",
},
{
"name" :"Luthor",
"title" :"Prince",
"gender" :"Male"
},
{
"name" :"Mileena",
"title" :"Princess",
"gender" :"Female"
},
]

}

在第三个圆括号后面从结尾开始不会有逗号。

JSONString = '{ . . . . }';
JSONObject = JSON.parse(JSONString);

这样就可以从JSONObject访问JSON数据。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

json_text = '{
"residents":[
{
"name" :"Jacob",
"title" :"King",
"gender" :"Male",
},
{
"name" :"Luthor",
"title" :"Prince",
"gender" :"Male"
},
{
"name" :"Mileena",
"title" :"Princess",
"gender" :"Female"
},
]}';
var obj = JSON.parse(json_text);
alert(obj.residents[2].name);

此代码将在浏览器中显示一个警告对话框，该对话框的值为数组residents中第二个对象的name属性。

相关讨论

你可以像下面这样取它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用javascript，你只需要……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

obj = JSON.parse({
"residents": [
{
"name" :"Jacob",
"title" :"King",
"gender" :"Male",
},
{
"name" :"Luthor",
"title" :"Prince",
"gender" :"Male"
},
{
"name" :"Mileena",
"title" :"Princess",
"gender" :"Female"
},
]
});

现在您可以在一个对象中管理JSON。

1	console.log(obj);

您可以为此使用jquery。

1
2
3
4
5
6

$.ajax({
url:"\data.json", //name of your json file
success: function (data) {
var obj = JSON.parse(data);
}
});

然后您可以通过以下调用获得必要的属性：

1	obj.residents[0].name

等等。

假设这是针对Web的，因为您的Web标签，最简单的方法是使用jquery。

1	$.get('http://ip.jsontest.com', function(data) { console.log(data); });

如果服务器在JSON的响应中使用了正确的MIME类型，那么jquery会将其转换为一个对象，上面例子中的"data"就是被评估的json。

如果服务器不使用正确的MIME类型，可以将其包装在JSON.parse:中。

1	var json = JSON.parse(data);

像这样？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(function () {

$("#btnTest").click(function () {

var data = {
"residents": [{
"name":"Jacob",
"title":"King",
"gender":"Male",
}, {
"name":"Luthor",
"title":"Prince",
"gender":"Male"
}, {
"name":"Mileena",
"title":"Princess",
"gender":"Female"
}, ]
};
//If you're getting it somewhere from ajax call, than possibly it would be in string , in that case you need to `parse` it as data = JSON.parse(data);
$.each(data.residents, function (index, value) {
$("#data").append(value.name +"" + value.title +"" + value.gender +" </br>");
});

});

});

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <input type="button" id="btnTest" value="Try Me!" />

相关讨论

试试这个…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24