use a json file to retrieve json object from server and display data in table

Question

I am very new to programming with jQuery and I am trying to retrieve a JSON object from a json file I have locally and display the data in a table within the webpage. I have looked at several different forums for this but all of my code so far has got errors within firebug.

the closest I got was this little snippet of code to returning anything:

var vendor;

$.ajax({  
        async: true,  
        type: "POST",  
        url: "dataRetrieval.json",  
        data: "vendorId="+vendor,  
        success: function(json){    
               alert( "Data retrieved: " + json );   
        }  
    });

And when I ran that I got the following to display in the alert: Data retrieved: [object XMLDocument]

I am obviously missing something here, if someone would be able to help me out here it would be GREATLY appreciated.

MightyE · Accepted Answer · 2012-03-23 11:09:27Z

1

Just add a dataType:'json' and you should be ok:

$.ajax({
    async: true,
    type: "POST",
    url: "dataRetrieval.json",
    data: "vendorId="+vendor,
    dataType: 'json',
    success: function(json){
        alert( "Data retrieved: " + json );
    }
});

Also check out $.getJSON(). Plus you might consider passing the data attribute as a dictionary: data: {vendorId: vendor}, it's a little more flexible and doesn't expose you to encoding problems when dealing with user input (eg, if a user entered "Jack & Jill" into a name field, it will escape that & sign correctly).

answered Mar 23, 2012 at 11:09

MightyE

2,67918 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1288091 Over a year ago

thanks for your quick response, but when I do that I just get the following alert: Data retrieved: [object Object] I am very new to programming and likely reaching beyond my knowledge base but am just curious about this.

aki · Accepted Answer · 2012-03-23 11:16:09Z

0

Verify if your JSON is valid -> http://www.jsonlint.com I'm guessing your JSON has multiple data.

HTML

<table id="table"></table>

jQuery

$.getJSON("dataRetrieval.json",function(data){
   $.each(data,function(index, d){
       //append data to your table as rows
       $('#table').append(
           '<tr>' +
               '<td>' + d.row1entry1
               '<\/td>' +
               ........
           '<\/tr>'
       );          
   });
});

answered Mar 23, 2012 at 11:16

aki

7098 silver badges25 bronze badges

2 Comments

user1288091 Over a year ago

thanks @aki for your quick response! When I do this snippet of code I get the following error in firebug: 'code' missing ) after argument list [Break On This Error] '<\/td>' + '/code' I tried googling it but to no avail (or at least that I was able to understand). Any ideas?

user1288091 Over a year ago

I got this working!!! Thanks so much for your help!!! the one thing that I would say to keep in mind is that if you have more than one row, you have to add a '+' at the end of each '<\/tr>'.

Collectives™ on Stack Overflow

use a json file to retrieve json object from server and display data in table

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related