Question

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

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

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

Answer 2

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

采用格式良好的JSON字符串并返回生成的JavaScript 对象

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

第二：您在HTML和JavaScript中为表格使用不同的ID。＆＃34;触点＆＃34;与＆＃34;联系＆＃34;

Answer 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/

从JSON文件创建联系表

3 个答案: