在JavaScript中使用jQuery读取JSON文件
[英]Read json file with jquery in javascript
问题描述
I am trying to readed json file in jquery with javascript. 
我正在尝试使用javascript读取jquery中的json文件。 What is my wrong with this code 我的这段代码有什么问题
$(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>
And my json codes 和我的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
}
]
}
For source, I download a jquery file fromwebsite to my folder. 作为源，我将一个jquery文件从网站下载到我的文件夹中。
I added this picture because of source is very important about json and I want to be sure my way is ture for create a html. 我添加此图片是因为来源对于json非常重要，我想确保我的方式适合创建html。
When I start html there is not data as shown in picture 当我启动html时，没有数据，如图所示
2 个解决方案
解决方案1
2 2017-03-17 07:45:13
Assuming that your AJAX request is working, there are several syntax problems in your code. 假设您的AJAX请求正在运行，则代码中存在几个语法问题。
- You have a random
ssbefore the$.each()closing brace$.each()括号前有一个随机ss - You're looping over
data.new4which doesn't exist.您正在遍历不存在的data.new4。 You need to loop over thedata.personarray您需要遍历data.person数组 - The property names you're using do not match those in the object. 您使用的属性名称与对象中的属性名称不匹配。 Note that JS is case sensitive. 请注意，JS区分大小写。
- You need to use bracket notation to access the
'Email Address'property as it contains a space - or better still change it to match the format of the other properties, ie.您需要使用方括号表示法来访问'Email Address'属性，因为该属性包含空格-或最好还是更改它以匹配其他属性的格式，即。emailAddress.emailAddress。 The same should be done forCitytoo.对City也应这样做。 - While not an error, you don't need to append string literals together, just put them in the same string. 虽然不是错误，但您无需将字符串文字附加在一起，只需将它们放在相同的字符串中即可。
With those fixes in place your code should work: 有了这些修复，您的代码应该可以工作：
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>
Also note that all of the above errors can be found by checking the console in your browser. 还要注意，通过检查浏览器中的控制台，可以发现所有上述错误。 This can generally be accessed by pressing F12 通常可以通过按F12来访问
解决方案2
1 2017-03-17 07:45:00
If i understand you correctly following code will solve your issue. 如果我理解正确，那么遵循以下代码即可解决您的问题。
Please change your .each function with this 请以此更改您的.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.