Create Table with GetJSON Response in jQuery

Question

I'm trying to fetch some data from our database using jQuery's getJSON method. I am able to get a response without issues, but when I try to append it to the page, it's undefined.

Sample json:

{ "ItemCount":1, "ProductID":"4220002", "ProdMfg":"", "Desc":"", "Quantity":33, "UnitPrice":1, "ExtPrice":33 }

jQuery Code:

$.getJSON('webcatpageserver.exe?aShoppingCart', function(data) {
    var table = '<table>';
    $.each(data, function(index, item) {
        table += '<tr><td>' + item.ProductID + '</td><td>' + item.Quantity + '</td>    </tr>';
    });
    table += '</table>';
    $("#mini-pallet").append(table);
});

HTML: In the HTML, I see "undefined" displayed.

I assume I'm not accessing the data properly in order to display it - but I could use a push in the right direction. Thanks!

After dealing with issues stated in the answers below, you should also checkout: jQuery code references the ProdID property of item (item.ProdID) but there is no such property in the sample json you've provided. — Cafe Coder
– Cafe Coder, Commented Jul 23, 2015 at 6:14

Carsten Massmann · Accepted Answer · 2015-07-23 06:14:12Z

2

You definitely need a push() in the right direction, maybe an array_push() in your server page that creates the getJSON response. ;-)

Your response object is currently not an Array, so your $.each() will instead go through each of your properties in your json object and will then not find the expected properties again.

A json object like

[{ "ItemCount":1, "ProductID":"4220002", "ProdMfg":"", "Desc":"", "Quantity":33, "UnitPrice":1, "ExtPrice":33 }]

where you place your original objects as elements into an array would probably work.

edited Jul 23, 2015 at 6:14

answered Jul 23, 2015 at 6:07

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

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

Comments

Barr J · Accepted Answer · 2015-07-23 06:11:52Z

0

Your each loop, as said in another answers here, is not an array, nor a list. So you are iterating over each and every item but, you are not getting any string tags, as they are not objects and therefore, ignored.

The push() method can be handy here, but, just for explanation, you need to convert this each loop into actual string, so it will be recognized as an entire string, not an object.

answered Jul 23, 2015 at 6:11

Barr J

11k2 gold badges31 silver badges49 bronze badges

Collectives™ on Stack Overflow

Create Table with GetJSON Response in jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related