从JSON数据创建联系人表 [英] Create contact table from JSON data

问题描述

我最近开始了一个关于HTML，JSON和jQuery的示范项目。
我想现在要实现的是从JSON文件获取数据并将其加载到我的表中。
我是JSON的新手，所以花了我一天的时间，数据没有加载到我的表中。

这是我的JSON文件， 'contact.json'：

  {
length：2，
info：[ 
 {
fullname：Noob Here，
email：[e-mail]，
phone：123456，
 badgeid：11111，
}，
 {
全名：新手有，
email：[e-mail]，
phone：589433，
badgeid：11112，
} 
] 
} 
  pre> 
 
 
我的脚本加载数据： 
 
 
  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>'）; 
}）
}; 
 
函数loadData（myobject，myfile）{
 myobject = $ .parseJSON（../ data /+ myfile +.json）; 
}; 
  
请注意，我可能想从各种JSON文件加载，因此loadData在那里有一些修正。否则，它将直接解析JSON文件。
 
 
 
我已经在HTML中声明了一个'#contact'表。 
错误控制台表示：
 $ b 
 
 
未捕获的SyntaxError：意外的令牌。
 
 jQuery.extend.parseJSONjquery。 min.js：442 
 
 loadDataHomepage.html：23 
 
 window.onload  
 
为什么会出现此错误？如何解决这个问题？
解决方案

通过JSON验证器运行您的JSON，例如 JSONLint.com 。您在JSON中出现语法错误：

  {
length：2，
info ：[
 {
fullname：Noob Here，
email：[e-mail]，
phone：123456，
badgeid：11111，< ----不要在花括号前加上逗号
}，
 {
全名：新手在那里， 
email：[e-mail]，
phone：589433，
badgeid：11112，< ----删除逗号前的逗号你的JSON应该改为看看你的JSON，而不是你的JSON。像这样：
 
 
  {
length：2，
info：[
 {
fullname：Noob Here，
email：[e-mail]，
phone：123456，
badgeid ：11111
}，
 {
全名：Newbie There，
email：[e-mail]，
phone：589433，
badgeid：11112
} 
] 
 } 
  
 
I started a demonstration project on HTML, JSON and jQuery recently.
Thing I want to achieve now is get data from the JSON file and load it into my table.
I am new to JSON so it took me a day to get to nothing, the data was not loaded into my table.

Here is my JSON file, 'contact.json':
{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"[e-mail]",
            "phone":"123456",
            "badgeid": "11111",
        },
        {
            "fullname":"Newbie There",
            "email":"[e-mail]",
            "phone":"589433",
            "badgeid": "11112",
        }
    ]
}
My script to load data:
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");
};
Please notice that I may want to load from various JSON file, so loadData have some agruments there. Otherwise, it will parse JSON file directly.

I already had a '#contact' table declared in HTML.
The error console said:

  
Uncaught SyntaxError: Unexpected token.

      jQuery.extend.parseJSONjquery.min.js:442

      loadDataHomepage.html:23

      window.onload
Why is this error appearing? How do I fix this problem?
解决方案
Run your JSON through a JSON validator, for instance JSONLint.com. You have a syntax error in your JSON:
{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"[e-mail]",
            "phone":"123456",
            "badgeid": "11111",  <---- Do not put a comma before a curly brace
        },
        {
            "fullname":"Newbie There",
            "email":"[e-mail]",
            "phone":"589433",
            "badgeid": "11112",  <---- remove comma before curly brace
        }
    ]
}
Your JSON should instead look like this:
{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"[e-mail]",
            "phone":"123456",
            "badgeid": "11111"
        },
        {
            "fullname":"Newbie There",
            "email":"[e-mail]",
            "phone":"589433",
            "badgeid": "11112"
        }
    ]
}


                        
这篇关于从JSON数据创建联系人表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！