从 JSON 文件创建联系人表答案

【问题标题】：Create contact table from JSON file从 JSON 文件创建联系人表
【发布时间】：2013-01-11 14:24:53
【问题描述】：

我是 JSON 新手。

我最近在做一个关于 HTML、JSON 和 jQuery 的项目。我现在想要实现的是从 JSON 文件中获取数据并将其加载到我的表中。数据未加载到我的表中。

我的json文件contact.json

{
    "length": 2,
    "info": [
        {
            "name":"Sam",
            "email":"fred@server.com",
            "phone":"789456235"
        },
        {
            "name":"Fred",
            "email":"fred@server.com",
            "phone":"125689564"
        }
    ]
}

我的加载数据的脚本：

window.onload = function () {
            var contacts;
            setTimeout(function(){  //pass it an anonymous function that calls foo
                          loadData("contact");
                       },2000);
        };

        function loadData(myfile){
           $.getJSON( myfile + ".json", function(data){
            console.log(data)
              $.each(data, function(index, element){
            $.each(element, function(i, item){  
               $('#contacts').append('<tr><td>' + item.name + '</td><td>'+ item.email +'</td><td>' + item.phone + '</td><td>');       
            });
              });
           });
        }

我的 HTML

<body>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
    <div title="Home">
        <table id='contacts'></table>   
    </div>
</div>

我从Create contact table from JSON data复制了整个内容

这是错误

    TypeError: j is undefined
http://code.jquery.com/jquery-1.4.4.min.js
Line 32

我正在控制台中获取对象。但未加载数据。我该如何解决这个问题？

【问题讨论】：

你有 JS 错误吗？
$.parseJSON("../data/" + myfile + ".json"); 解析一个 JSON 字符串返回一个 Object；它不会从您的 JSON 文件中获取数据。为此，您需要使用 $.getJSON("../data/" + myfile + ".json", function(data){ //Parse JSON here })

标签： jquery html json html-table

【解决方案1】：

$.parseJSON() 解析 JSON 字符串以返回 JSON 对象。它不会从您的 JSON 文件中获取数据。为此，您需要使用$.getJSON(url, function(data){ //Parse JSON here })

将您的 loadData 函数更新为：

function loadData(myobject, myfile){
    $.getJSON("../data/" + myfile + ".json", function(data){
        myobject = data;
        $(myobject.info).each(function(index, element){  
            $('#contacts').append('<tr><td>' + element.name + '</td><td>'
            + element.email + '</td><td>'
            + element.phone + '</td><td>');       
        })
    })
};

并将您的 onLoad 函数更改为：

window.onload = function () {
    var contacts;
    setTimeout(function(){
        loadData(contacts, "contact");
    }, 2000);
};

【讨论】：

我仍然没有在页面上获取数据
记录回调的结果，看看你是否真的得到了任何数据，即在myobject = data行之前放一个console.log(data)。
错误：无用的 setTimeout 调用（参数周围缺少引号？） setTimeout(loadData(contacts, "contact"));这是我遇到的错误
我正在控制台中获取对象。但数据没有加载

【解决方案2】：

您正在将文件的相对 url 传递给 jQuery.parseJSON 函数。 API documentation says，即 jQuery.parseJSON:

采用格式良好的 JSON 字符串并返回结果 JavaScript 对象。

您应该首先加载 json 文件 (maybe with jQuery.getJSON()) 的内容并将结果传递给 parseJSON 函数。

第二：您在 HTML 和 JavaScript 中为表格使用不同的 ID。 “联系人”与“联系人”

【讨论】：

您的表的 id 为“contact”，但在 jQuery 中，您正尝试通过“#contacts”访问它。（“s”太多了）。
我不想硬编码。我想从 JSON 文件中获取数据
当然，这只是为了 jsFiddle。我将您的 json 作为数据发送到 echo api，所以我将您的数据作为 json 接收（有点复杂）。而且我发现了另一个错误：在您的“追加”功能中，您缺少一个关闭表行 ()。最后一个应该是 .
这是托管在我的服务器上的完整工作代码示例。所以我可以使用一个json文件。 test.joquery.com/stackoverflow/14558801

【解决方案3】：

试试这个：

因为你有info[]的数组

$(function () {
   setTimeout(function(){  //pass it an anonymous function that calls foo
      loadData('contact');
   },2000);
});

function loadData(myfile){
   $.getJSON("../data/" + myfile + ".json", function(data){
      $.each(data, function(index, element){
        $.each(element, function(i, item){  
           $('#contacts').append('<tr><td>' + item.name + '</td><td>'+ item.email +'</td><td>' + item.phone + '</td><td>');       
        });
      });
   });
}

我通过创建一个包含所有 json 值的 var json 在小提琴上做到了这一点。 http://jsfiddle.net/vyTjn/

【讨论】：

错误：无用的 setTimeout 调用（参数周围缺少引号？） file:///home/sreekeshos/jquery%20ui/index.html.erb 第 16 行
也试过了。现在我得到 Error: useless setTimeout call (missing quotes around argument?) code.jquery.com/jquery-1.4.4.min.js Line 32 TypeError: j is undefined code.jquery.com/jquery-1.4.4.min.js Line 32
我正在控制台中获取对象。但数据没有加载
loadData('contact'); 与'quotes' 通话
让我们continue this discussion in chat