JSONデータからコンタクトテーブルを作成

Question

最近、HTML、JSON、jQueryのデモンストレーションプロジェクトを開始しました。 ここで達成したいことは、JSONファイルからデータを取得してそれを私のテーブルにロードすることです。 私はJSONの初心者ですので、何もしないために1日かかりました。データがテーブルに読み込まれませんでした。

{ 
    "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ファイルからロードすることに注意してください。ここ

は私のJSONファイル、 'contact.jsonは' loadDataにはいくつかの手段があります。それ以外の場合は、JSONファイルを直接解析します。

私はすでにHTMLで宣言された '#contact'テーブルを持っていました。 エラーコンソールは言った：

Uncaught SyntaxError: Unexpected token.
jQuery.extend.parseJSONjquery.min.js:442
loadDataHomepage.html:23
window.onload

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

Answer 1

JSONバリデーター（例：JSONLint.com）を使用して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" 
     } 
    ] 
} 

Answer 2

この投稿への参照

JSON.parse unexpected character error

で、私はあることを知るようになっあなたは既に解析済みのJSONを解析します

あなたはあなたのscriを置き換えることができますptを次のように入力します。

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