3

最近、HTML、JSON、および jQuery のデモ プロジェクトを開始しました。私が今達成したいことは、JSON ファイルからデータを取得し、それをテーブルにロードすることです。私は JSON を初めて使用するので、データがテーブルに読み込まれませんでした。

これが私の JSON ファイル 'contact.json' です。

{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"myemail@server.com",
            "phone":"123456",
            "badgeid": "11111",
        },
        {
            "fullname":"Newbie There",
            "email":"hisemail@server.com",
            "phone":"589433",
            "badgeid": "11112",
        }
    ]
}

データをロードするための私のスクリプト:

window.onload = function () {
    var contacts;
    setTimeout(loadData(contacts, "contact"), 2000);
    $(contacts.info).each(function(index, element){  
        $('#contacts').append('<tr><td>' + element.fullname + '</td><td>'
            + element.email + '</td><td>'
            + element.phone + '</td><td>'
            + element.badgeid + '</td></tr>');       
    })
};

function loadData(myobject, myfile){
    myobject = $.parseJSON("../data/" + myfile + ".json");
};

さまざまな JSON ファイルからロードしたい場合があることに注意してください。そのため、loadData にはいくつかの引数があります。それ以外の場合は、JSON ファイルを直接解析します。

HTMLで宣言された「#contact」テーブルがすでにありました。エラーコンソールは次のように述べています。

キャッチされない SyntaxError: 予期しないトークンです。
jQuery.extend.parseJSONjquery.min.js:442
loadDataHomepage.html:23
window.onload

このエラーが表示されるのはなぜですか? この問題を解決するにはどうすればよいですか?

4

2 に答える 2

4

この投稿を参照して

JSON.parseの予期しない文字エラー

すでに解析されたJSONを解析していることがわかりました

次のようにスクリプトを置き換えることができます。

    window.onload = function () {
       var contacts;
       $.getJSON('contact.json',function(contacts)
        {
          $(contacts.info).each(function(index, element){  
               $('#contacts').append('<tr><td>' + element.fullname + '</td><td>'
                 + element.email + '</td><td>'
                 + element.phone + '</td><td>'
                 + element.badgeid + '</td></tr>');       
           })  
        });
     };
于 2012-04-10T04:42:59.460 に答える
2

JSONLint.comなどの JSON バリデーターを使用して JSON を実行します。JSON に構文エラーがあります。

{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"myemail@server.com",
            "phone":"123456",
            "badgeid": "11111",  <---- Do not put a comma before a curly brace
        },
        {
            "fullname":"Newbie There",
            "email":"hisemail@server.com",
            "phone":"589433",
            "badgeid": "11112",  <---- remove comma before curly brace
        }
    ]
}

JSON は代わりに次のようになります。

{
    "length": 2,
    "info": [
        {
            "fullname":"Noob Here",
            "email":"myemail@server.com",
            "phone":"123456",
            "badgeid": "11111"
        },
        {
            "fullname":"Newbie There",
            "email":"hisemail@server.com",
            "phone":"589433",
            "badgeid": "11112"
        }
    ]
}
于 2012-04-10T04:02:24.993 に答える