Create contact table from JSON data

I started a demonstration project on HTML, JSON and jQuery recently. Thing I want to achieve now is get data from the JSON file and load it into my table. I am new to JSON so it took me a day to get to nothing, the data was not loaded into my table.

Here is my JSON file, '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",
        }
    ]
}

My script to load data:

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

Please notice that I may want to load from various JSON file, so loadData have some agruments there. Otherwise, it will parse JSON file directly.

I already had a '#contact' table declared in HTML. The error console said:

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

Why is this error appearing? How do I fix this problem?

---

Run your JSON through a JSON validator, for instance JSONLint.com. You have a syntax error in your 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
        }
    ]
}

Your JSON should instead look like this:

{
    "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"
        }
    ]
}

---

With reference to this post

JSON.parse unexpected character error

I come to know that you parse already parsed JSON

You can replace your script as follows:

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

链接地址: http://www.djcxy.com/p/48408.html

上一篇: 使用非圆整Python中的错误

下一篇: 从JSON数据创建联系人表