在JavaScript中使用jQuery读取JSON文件
[英]Read json file with jquery in javascript
问题描述
我正在尝试使用javascript读取jquery中的json文件。 我的这段代码有什么问题
$(function() { var new4 = []; $.getJSON('new4.json', function(data) { $.each(data.new4, function(i, f) { var tblRow = "<tr>" + "<td>" + f.FirstName + "</td>" + "<td>" + f.LastName + "</td>" + "<td>" + f.EmailAddress + "</td>" + "<td>" + f.City + "</td>" + "</tr>" $(tblRow).appendTo("#userdata tbody"); } ss); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <body> <div class="wrapper"> <div class="profile"> <table id="userdata" border="2"> <thead> <th>FirstName</th> <th>LastName</th> <th>EmailAddress</th> <th>City</th> </thead> <tbody> </tbody> </table> </div> </div> </body> </html>
和我的json代码
{
"person": [
{
"firstName": "Clark",
"lastName": "Kent",
"Email Address": "Reporter",
"City": 20
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"Email Address": "Playboy",
"City": 30
},
{
"firstName": "Peter",
"lastName": "Parker",
"Email Address": "Photographer",
"City": 40
}
]
}
作为源，我将一个jquery文件从网站下载到我的文件夹中。
我添加此图片是因为来源对于json非常重要，我想确保我的方式适合创建html。
当我启动html时，没有数据，如图所示
2 个解决方案
解决方案1
2 2017-03-17 07:45:13
假设您的AJAX请求正在运行，则代码中存在几个语法问题。
-
$.each()括号前有一个随机ss - 您正在遍历不存在的
data.new4。 您需要遍历data.person数组 - 您使用的属性名称与对象中的属性名称不匹配。 请注意，JS区分大小写。
- 您需要使用方括号表示法来访问
'Email Address'属性，因为该属性包含空格-或最好还是更改它以匹配其他属性的格式，即。emailAddress。 对City也应这样做。 - 虽然不是错误，但您无需将字符串文字附加在一起，只需将它们放在相同的字符串中即可。
有了这些修复，您的代码应该可以工作：
var data = { "person": [{ "firstName": "Clark", "lastName": "Kent", "Email Address": "Reporter", "City": 20 }, { "firstName": "Bruce", "lastName": "Wayne", "Email Address": "Playboy", "City": 30 }, { "firstName": "Peter", "lastName": "Parker", "Email Address": "Photographer", "City": 40 }] } //$.getJSON('new4.json', function(data) { $.each(data.person, function(i, person) { var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>" $(tblRow).appendTo("#userdata tbody"); }); //});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="profile"> <table id="userdata" border="2"> <thead> <th>FirstName</th> <th>LastName</th> <th>EmailAddress</th> <th>City</th> </thead> <tbody> </tbody> </table> </div> </div>
还要注意，通过检查浏览器中的控制台，可以发现所有上述错误。 通常可以通过按F12来访问
解决方案2
1 2017-03-17 07:45:00
如果我理解正确，那么遵循以下代码即可解决您的问题。
请以此更改您的.each函数
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
"<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>"
$(tblRow).appendTo('body');
});
var data = { "person": [ { "firstName": "Clark", "lastName": "Kent", "Email Address": "Reporter", "City": 20 }, { "firstName": "Bruce", "lastName": "Wayne", "Email Address": "Playboy", "City": 30 }, { "firstName": "Peter", "lastName": "Parker", "Email Address": "Photographer", "City": 40 } ] } $.each(data.person, function(i, f) { var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + "<td>" + f.lastName + "</td>" + "<td>" + f["Email Address"] + "</td>" + "<td>" + f.City + "</td>" + "</tr>" $(tblRow).appendTo('body'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body></body>
在JavaScript中读取JSON文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.