从 JSON 数据创建联系人表

Posted 2023-03-05

【中文标题】从 JSON 数据创建联系人表

【英文标题】：Create contact table from JSON data

【发布时间】：2012-04-22 09:35:46

【问题描述】：

我最近开始了一个关于 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 窗口.onload

为什么会出现这个错误？我该如何解决这个问题？

【问题讨论】：

+1 - 很棒、整洁、格式正确且详细的问题。

【参考方案1】：

参考这篇文章

JSON.parse unexpected character error

我知道你解析了已经解析的 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。

虽然这不是问题，但 +1 用于清理代码并提供帮助。干净的代码使故障排除更加顺畅！

【参考方案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"
        
    ]

【讨论】：

感谢 jmort253，我对结构如此粗心。但是修复JSON文件后错误仍然存​​在。

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

太好了，我清理了所有缓存后就可以解决了。似乎是因为我使用清单缓存了文件并且它一直在加载旧文件。再次感谢@jmort253。