從JSON數據創建聯繫表

我最近在HTML，JSON和jQuery上開始了一個演示項目。我想現在要實現的是從JSON文件中獲取數據並將其加載到我的表中。我是JSON的新手，所以花了我一天的時間，沒有將數據加載到我的表中。從JSON數據創建聯繫表

這裏是我的JSON文件， 'contact.json'：

{ 
    "length": 2, 
    "info": [ 
     { 
      "fullname":"Noob Here", 
      "email":"[email protected]", 
      "phone":"123456", 
      "badgeid": "11111", 
     }, 
     { 
      "fullname":"Newbie There", 
      "email":"[email protected]", 
      "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'表。錯誤控制檯說：

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

爲什麼會出現此錯誤？我該如何解決這個問題？

來源

2012-04-10 Shinigamae

+1 - 偉大，整潔，格式良好和詳細的問題。 – jmort253 2012-04-10 04:04:57

通過JSON驗證程序運行您的JSON，例如JSONLint.com。你有一個語法錯誤在你的JSON：

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

你的JSON應該不是這個樣子：

{ 
    "length": 2, 
    "info": [ 
     { 
      "fullname":"Noob Here", 
      "email":"[email protected]", 
      "phone":"123456", 
      "badgeid": "11111" 
     }, 
     { 
      "fullname":"Newbie There", 
      "email":"[email protected]", 
      "phone":"589433", 
      "badgeid": "11112" 
     } 
    ] 
}

來源

2012-04-10 04:02:24 jmort253

謝謝jmort253，我對結構太粗心了。但固定的JSON文件後，錯誤仍然存在。 – Shinigamae 2012-04-10 04:18:00

嘗試使用相同的URL在瀏覽器中加載JSON文件。確保你沒有看到一個緩存副本。或者，在URL的末尾添加一個查詢參數來緩存緩存，例如'。.parseJSON（「../ data /」+ myfile +「.json？t = 12345」）;'。另外，如果您還沒有這樣做，請通過JSONLint重新運行您的JSON，直到它無錯誤地進行驗證。另外，請嘗試清除緩存。做所有這些應該確保你沒有看到緩存在瀏覽器中的東西。 ../data目錄中加載了哪個網址。確保路徑正確。 – jmort253 2012-04-10 04:36:30

太好了，在我清理完所有的緩存之後，它就可以運行了。似乎是因爲我使用清單緩存文件，並且它一直在加載舊文件。再次感謝@ jmort253。 – Shinigamae 2012-04-10 07:13:21

參考這篇文章

JSON.parse unexpected character error

我又知道你解析已解析JSON

你可以替換你的scrip點如下：

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-10 04:42:59 Usman

它簡化了我的代碼，真正解決了問題。感謝和問候，@Usman。 – Shinigamae 2012-04-10 07:14:43

雖然這不是問題，但用於清理代碼並幫助解決問題的方法是+1。乾淨的代碼使故障排除變得更加順暢！ – jmort253 2012-04-10 07:17:40

@ jmort253..thnx編輯.... @ shinigamae你是最受歡迎的 – Usman 2012-04-10 07:23:17

從JSON數據創建聯繫表

回答

相關問題