从JSON文件创建联系人表格

Question

从JSON文件创建联系人表格

3

我对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>

我从创建JSON数据的联系人表中复制了整个内容。

这是错误信息。

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

我在控制台中获取了对象，但数据没有加载。我该怎么解决这个问题？

- Okky

你有收到任何JS错误吗？ - Jan Hančič

1

$.parseJSON("../data/" + myfile + ".json"); 解析 JSON 字符串以返回一个对象；它不会从你的 JSON 文件中获取数据。为此，你需要使用 $.getJSON("../data/" + myfile + ".json", function(data){ //在这里解析 JSON })。 - kayen

3个回答

2

尝试这样做：

因为你有一个 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>');       
        });
      });
   });
}

我已经在fiddle上通过创建一个包含所有json值的var json来完成了这个操作。

http://jsfiddle.net/vyTjn/

- Jai

错误：无用的setTimeout调用（参数缺少引号？） file:///home/sreekeshos/jquery%20ui/index.html.erb 第16行 - Okky

尝试了那个方法，但现在我得到了以下错误：错误：无用的setTimeout调用（参数周围缺少引号？） http://code.jquery.com/jquery-1.4.4.min.js 第32行类型错误：j未定义 http://code.jquery.com/jquery-1.4.4.min.js 第32行 - Okky

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/23496/discussion-between-sreekesh-okky-and-jai - Okky

k. 仍然出现相同的错误 TypeError: j 未定义 http://code.jquery.com/jquery-1.4.4.min.js 第32行 - Okky

你已经尝试过将jQuery升级到最新版本并进行测试了吗？ - Jai

显示剩余3条评论

2

您正在将相对URL传递给jQuery.parseJSON函数。 API文档指出，jQuery.parseJSON：

接受格式良好的JSON字符串并返回生成的JavaScript对象。

您应该首先加载json文件的内容（也许使用jQuery.getJSON()），然后将结果传递给parseJSON函数。

第二：您在HTML和JavaScript中使用了不同的表ID。 "contacts"与"contact"不同。

- Jo David

您的表格具有“contact”的id，但在jQuery中，您尝试通过“#contacts”（“s”太多）访问它。 - Jo David

我不想硬编码。我想从一个JSON文件中获取数据。 - Okky

当然，这只是针对jsFiddle的。我将您的json作为数据发送到echo api，因此我会以json的形式接收您的数据（有点复杂）。我发现另一个错误：在您的“append”函数中，您缺少一个关闭的表格行（</tr>）。最后一个<td>应该是</tr>。 - Jo David

1

这是一个完整可运行的代码示例，托管在我的服务器上。因此我可以使用一个json文件。http://test.joquery.com/stackoverflow/14558801/ - Jo David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kayen · Accepted Answer

$.parseJSON()函数将JSON字符串解析成JSON对象，它并不从你的JSON文件获取数据。要实现这一点，你需要使用$.getJSON(url, function(data){ //在此处解析JSON })。

请更新你的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);
};