Create contact table from JSON data

Question

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?

+1 - Great, neat, well formatted and detailed question. – jamesmortensen Apr 10 '12 at 04:04 — jamesmortensen, Apr 10 '12 at 04:04

score 4 · Answer 1 · edited May 23 '17 at 12:20

4

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

edited May 23 '17 at 12:20

Community

1
1

answered Apr 10 '12 at 04:42

Usman

3,200
3
28
47

2

It simplified my code and really worked out. Thanks and regards, @Usman. – Shinigamae Apr 10 '12 at 07:14
1

Although this wasn't the problem, +1 for cleaning up the code and helping with that. Clean code makes troubleshooting go a lot smoother! – jamesmortensen Apr 10 '12 at 07:17

score 2 · Accepted Answer · answered Apr 10 '12 at 04:02

2

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

answered Apr 10 '12 at 04:02

jamesmortensen

33,636
11
99
120

Thanks jmort253, I was so careless about the structure. But the error is still there after fixed JSON file. – Shinigamae Apr 10 '12 at 04:18
1

Try loading the JSON file in your browser using that same URL. Make sure you're not seeing a cached copy. Alternatively, add a query parameter to the end of the URL to bust the cache, like `$.parseJSON("../data/" + myfile + ".json?t=12345");`. Also, if you haven't done so, rerun your JSON through JSONLint until it validates without errors. Also, try clearing your cache. Doing all of those should ensure you're not seeing something cached in your browser. What URL is your page loaded at in reference to ../data directory. Make sure the path is correct. – jamesmortensen Apr 10 '12 at 04:36
1

Great, it works out after I cleaned all the cache. Seems it because I cached files using manifest and it kept loading the old one. Thank again @jmort253. – Shinigamae Apr 10 '12 at 07:13

Create contact table from JSON data

2 Answers2

Linked