从JSON数据创建联系人表
我最近开始了一个关于HTML，JSON和jQuery的示范项目。 我想现在要实现的是从JSON文件中获取数据并将其加载到我的表中。 我是JSON的新手，所以花了我一天的时间，没有将数据加载到我的表中。
这是我的JSON文件'contact.json'：
{
"length": 2,
"info": [
{
"fullname":"Noob Here",
"email":"myemail@server.com",
"phone":"123456",
"badgeid": "11111",
},
{
"fullname":"Newbie There",
"email":"hisemail@server.com",
"phone":"589433",
"badgeid": "11112",
}
]
}
我的脚本加载数据：
window.onload = function () {
var contacts;
setTimeout(loadData(contacts, "contact"), 2000);
$(contacts.info).each(function(index, element){
$('#contacts').append('<tr><td>' + element.fullname + '</td><td>'
+ element.email + '</td><td>'
+ element.phone + '</td><td>'
+ element.badgeid + '</td></tr>');
})
};
function loadData(myobject, myfile){
myobject = $.parseJSON("../data/" + myfile + ".json");
};
请注意，我可能想从各种JSON文件加载，因此loadData在那里有一些修正。 否则，它会直接解析JSON文件。
我已经在HTML中声明了一个'#contact'表。 错误控制台说：
未捕获的SyntaxError：意外的令牌。
jQuery.extend.parseJSONjquery.min.js：442
loadDataHomepage.html：23
在window.onload
为什么会出现此错误？ 我该如何解决这个问题？
通过JSON验证程序运行JSON，例如JSONLint.com。 你的JSON中有语法错误：
{
"length": 2,
"info": [
{
"fullname":"Noob Here",
"email":"myemail@server.com",
"phone":"123456",
"badgeid": "11111", <---- Do not put a comma before a curly brace
},
{
"fullname":"Newbie There",
"email":"hisemail@server.com",
"phone":"589433",
"badgeid": "11112", <---- remove comma before curly brace
}
]
}
你的JSON应该看起来像这样：
{
"length": 2,
"info": [
{
"fullname":"Noob Here",
"email":"myemail@server.com",
"phone":"123456",
"badgeid": "11111"
},
{
"fullname":"Newbie There",
"email":"hisemail@server.com",
"phone":"589433",
"badgeid": "11112"
}
]
}
参考这篇文章
JSON.parse意外的字符错误
我知道你解析已经解析过的JSON
您可以按如下方式替换您的脚本：
window.onload = function () {
var contacts;
$.getJSON('contact.json',function(contacts)
{
$(contacts.info).each(function(index, element){
$('#contacts').append('<tr><td>' + element.fullname + '</td><td>'
+ element.email + '</td><td>'
+ element.phone + '</td><td>'
+ element.badgeid + '</td></tr>');
})
});
};