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>

Create contact table from JSON data から全部コピーしました

これがエラーです

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

コンソールでオブジェクトを取得しています。しかし、データはロードされません。この問題を解決するにはどうすればよいですか?

4

3 に答える 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>');       
        });
      });
   });
}

すべてのjson値でvar jsonを作成することで、フィドルでこれを行いました。 http://jsfiddle.net/vyTjn/

于 2013-01-28T09:40:51.040 に答える
2

ファイルへの相対 URL を jQuery.parseJSON 関数に渡しています。API ドキュメントには、その jQuery.parseJSONは次のように記載されています。

整形式の JSON 文字列を受け取り、結果の JavaScript オブジェクトを返します。

最初に json ファイルのコンテンツをロードし (おそらく jQuery.getJSON() を使用)、その結果を parseJSON 関数に渡す必要があります。

2 番目: HTML と JavaScript でテーブルに異なる ID を使用しています。「連絡先」と「連絡先」

于 2013-01-28T09:30:00.313 に答える
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 に答える