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

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

4

3 回答 3

2

$.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);
};
于 2013-01-28T09:25:24.410 回答
2

您正在将文件的相对 url 传递给 jQuery.parseJSON 函数。API文档说，jQuery.parseJSON：

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

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

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

于 2013-01-28T09:30:00.313 回答
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>');       
        });
      });
   });
}

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

于 2013-01-28T09:40:51.040 回答