从JSON数据创建联系人表格

Question

我最近开始了一个HTML、JSON和jQuery的演示项目。现在我想做的事情是从JSON文件中获取数据并将其加载到表格中。由于我对JSON不熟悉，所以花费了一天时间做了很多无用功，最终导致数据没有加载到我的表格中。

以下是我的JSON文件 "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",
        }
    ]
}

我的用于加载数据的脚本：

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'表。 错误控制台显示： Uncaught SyntaxError: Unexpected token. jQuery.extend.parseJSONjquery.min.js:442 loadDataHomepage.html:23 window.onload 为什么会出现这个错误？如何解决这个问题？

- Shinigamae

---

+1 - 很棒，整洁，格式良好且详细的问题。 - jamesmortensen

Answer 1

关于这篇文章的参考

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>');       
           })  
        });
     };

- Usman

---

它简化了我的代码，真的很有效。谢谢并致以问候，@Usman。 - Shinigamae

尽管这不是问题所在，但因为清理了代码并提供帮助，+1。清洁的代码使故障排除更加顺利！ - jamesmortensen

Answer 2

将您的JSON数据通过JSON验证器进行验证，例如JSONLint.com。您的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
        }
    ]
}

你的JSON应该像这样：

{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"[e-mail]",
            "phone":"123456",
            "badgeid": "11111"
        },
        {
            "fullname":"Newbie There",
            "email":"[e-mail]",
            "phone":"589433",
            "badgeid": "11112"
        }
    ]
}

- jamesmortensen

---

谢谢jmort253，我对结构太粗心了。但即使修复了JSON文件，错误仍然存在。 - Shinigamae

尝试使用相同的URL在浏览器中加载JSON文件。确保您没有看到缓存副本。或者，在URL的末尾添加查询参数以打破缓存，例如$.parseJSON("../data/" + myfile + ".json?t=12345");。此外，如果您还没有这样做，请将JSON重新运行通过JSONLint，直到它验证无误。同时，尝试清除缓存。做所有这些应该确保您在浏览器中没有看到缓存内容。您的页面加载的URL与../data目录相关联是什么？请确保路径正确。 - jamesmortensen

很好，我清除了所有缓存后它就可以正常工作了。看起来是因为我使用了清单缓存文件，它一直在加载旧的文件。再次感谢@jmort253。 - Shinigamae