Parsing JSON for an HTML table using jQuery

Question

Parsing JSON for an HTML table using jQuery

I use the code below to parse a JSON file, but I get undefined in every column of the table.

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { var json = [{ "RATE_UPLOAD_DATE": "07/01/2015 8:17 AM CT", "GROUPS": [ { "NAME": "Conforming Fixed Rate Mortgage Purchase", "PRODUCT": [ { "DESCR": "30 Year Fixed Rate", "RATE": "4.25", "APR": "4.277", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=58" }, { "DESCR": "20 Year Fixed Rate", "RATE": "4.125", "APR": "4.162", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=52" }, { "DESCR": "15 Year Fixed Rate", "RATE": "3.375", "APR": "3.422", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444902&ResultId=45" } ] }, { "NAME": "Conforming Adjustable Rate Mortgage Purchase", "PRODUCT": [ { "DESCR": "3/1 Fully Amortizing ARM", "RATE": "3.625", "APR": "3.166", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=27" }, { "DESCR": "5/1 Fully Amortizing ARM", "RATE": "3.25", "APR": "3.113", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=13" }, { "DESCR": "7/1 Fully Amortizing ARM", "RATE": "3.5", "APR": "3.258", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=5" }, { "DESCR": "10/1 Fully Amortizing ARM", "RATE": "3.75", "APR": "3.487", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444913&ResultId=65" } ] }, { "NAME": "Jumbo Fixed Rate Purchase", "PRODUCT": [ { "DESCR": "30 Year Fixed Rate", "RATE": "4.25", "APR": "4.265", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=6" }, { "DESCR": "15 Year Fixed Rate", "RATE": "3.5", "APR": "3.526", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444921&ResultId=30" } ] }, { "NAME": "Jumbo Adjustable Rate Mortgage Purchase", "PRODUCT": [ { "DESCR": "3/1 Fully Amortizing ARM", "RATE": "2.75", "APR": "2.959", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=56" }, { "DESCR": "5/1 Fully Amortizing ARM", "RATE": "3", "APR": "3.014", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=45" }, { "DESCR": "7/1 Fully Amortizing ARM", "RATE": "3.25", "APR": "3.13", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=37" }, { "DESCR": "5/1 Interest Only ARM", "RATE": "3.125", "APR": "3.055", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=13" }, { "DESCR": "10/1 Fully Amortizing ARM", "RATE": "3.5", "APR": "3.32", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444935&ResultId=22" } ] }, { "NAME": "Conforming Fixed Rate Mortgage Refinance", "PRODUCT": [ { "DESCR": "30 Year Fixed Rate", "RATE": "4.375", "APR": "4.402", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=62" }, { "DESCR": "20 Year Fixed Rate", "RATE": "4.25", "APR": "4.287", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=55" }, { "DESCR": "15 Year Fixed Rate", "RATE": "3.5", "APR": "3.547", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444940&ResultId=47" } ] }, { "NAME": "Conforming Adjustable Rate Mortgage Refinance", "PRODUCT": [ { "DESCR": "3/1 Fully Amortizing ARM", "RATE": "3.75", "APR": "3.194", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=30" }, { "DESCR": "5/1 Fully Amortizing ARM", "RATE": "3.375", "APR": "3.157", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=15" }, { "DESCR": "7/1 Fully Amortizing ARM", "RATE": "3.625", "APR": "3.317", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=6" }, { "DESCR": "10/1 Fully Amortizing ARM", "RATE": "3.875", "APR": "3.566", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444949&ResultId=70" } ] }, { "NAME": "Jumbo Fixed Rate Refinance", "PRODUCT": [ { "DESCR": "30 Year Fixed Rate", "RATE": "4.375", "APR": "4.39", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=6" }, { "DESCR": "15 Year Fixed Rate", "RATE": "3.625", "APR": "3.651", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444962&ResultId=30" } ] }, { "NAME": "Jumbo Adjustable Rate Mortgage Refinance", "PRODUCT": [ { "DESCR": "3/1 Fully Amortizing ARM", "RATE": "2.875", "APR": "2.986", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=56" }, { "DESCR": "5/1 Fully Amortizing ARM", "RATE": "3.125", "APR": "3.058", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=45" }, { "DESCR": "7/1 Fully Amortizing ARM", "RATE": "3.375", "APR": "3.188", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=37" }, { "DESCR": "5/1 Interest Only ARM", "RATE": "3.25", "APR": "3.097", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=13" }, { "DESCR": "10/1 Fully Amortizing ARM", "RATE": "3.625", "APR": "3.397", "POINTS": "0", "<PAYMENT_STREAM_URL>": "https://publicservices.mortgagewebcenter.com/PaymentStream.aspx?CobranderId=1152&CriteriaId=113444969&ResultId=22" } ] } ] }]; var tr; for (var i = 0; i < json.length; i++) { tr = $('<tr/>'); tr.append("<td>" + json[i].DESCR + "</td>"); tr.append("<td>" + json[i].RATE + "</td>"); tr.append("<td>" + json[i].APR + "</td>"); tr.append("<td>" + json[i].POINTS + "</td>"); $('table').append(tr); } }); </script> </head> <body> <table> <tr> <th>PRODUCT</th> <th>RATE</th> <th>APR*</th> <th>POINTS</th> </tr> </table> </body> </html>

+6

json javascript jquery html

Aquarius24 Jul 02 '15 at 7:18

source share

6 answers

replace script

 var tr; for (var i = 0; i < json.length; i++) { tr = $('<tr/>'); tr.append("<td>" + json[i].DESCR + "</td>"); tr.append("<td>" + json[i].RATE + "</td>"); tr.append("<td>" + json[i].APR + "</td>"); tr.append("<td>" + json[i].POINTS + "</td>"); $('table').append(tr); }

with

 var groups = json[0].GROUPS; //console.log(groups); var tr; for (var i = 0; i < groups.length; i++) { //console.log(groups[i].PRODUCT[0]); tr = $('<tr/>'); tr.append("<td>" + groups[i].PRODUCT[0].DESCR + "</td>"); tr.append("<td>" + groups[i].PRODUCT[0].RATE + "</td>"); tr.append("<td>" + groups[i].PRODUCT[0].APR + "</td>"); tr.append("<td>" + groups[i].PRODUCT[0].POINTS + "</td>"); $('table').append(tr); } });

+3

Radu gheorghies Jul 02 '15 at 7:37

source share

Try it. Use jquery foreach loop.

 var tr; $.each(json.GROUPS, function(key, value) { $.each(value.PRODUCT, function(key, item) { tr = $('<tr/>'); tr.append("<td>" + item.DESCR + "</td>"); tr.append("<td>" + item.RATE + "</td>"); tr.append("<td>" + item.APR + "</td>"); tr.append("<td>" + item.POINTS + "</td>"); $('table').append(tr); }); });

+3

shiva kumar Jul 02 '15 at 7:58

source share

 var tr; for (var i = 0; i < json[0].GROUPS.length; i++) { var tmp = json[0].GROUPS[i]; tr = $('<tr/>'); tr.append("<td>" + tmp.PRODUCT.DESCR + "</td>"); tr.append("<td>" + tmp.PRODUCT.RATE + "</td>"); tr.append("<td>" + tmp.PRODUCT.APR + "</td>"); tr.append("<td>" + tmp.PRODUCT.POINTS + "</td>"); $('table').append(tr); }

+2

Raghavendra Jul 02 '15 at 7:23

source share

Try json[0].GROUPS[i].PRODUCT[0].DESCR instead of json[i].DESCR

  var tr; for (var i = 0; i < json[0].GROUPS.length; i++) { console.log(json[0].GROUPS[i]) tr = $('<tr/>'); tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].DESCR + "</td>"); tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].RATE + "</td>"); tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].APR + "</td>"); tr.append("<td>" + json[0].GROUPS[i].PRODUCT[0].POINTS + "</td>"); $('table').append(tr); }

Fiddle

+2

Manoj Jul 02 '15 at 7:27

source share

Scroll through each object, insert an array of strings and append them. Add to the target table, this is better.

 $(document).ready(function () { $.getJSON(url, function (json) { var tr=[]; for (var i = 0; i < json.length; i++) { tr.push('<tr>'); tr.push("<td>" + json[i].DESCR + "</td>"); tr.push("<td>" + json[i].RATE + "</td>"); tr.push("<td>" + json[i].APR + "</td>"); tr.push("<td>" + json[i].POINTS + "</td>"); tr.push('</tr>'); } $('table').append($(tr.join(''))); });

see Parsing JSON objects for an HTML table

+2

Kamruzzaman Jul 02 '15 at 8:02

source share

Alex tartan · Accepted Answer · 2015-07-02T07:29:56+0000

Check this:

 for (var i = 0; i < json[0]["GROUPS"].length; i++) { products = json[0]["GROUPS"][i]['PRODUCT']; console.log(products); for (var j = 0; j < products.length; j++) { console.log(products[j]); tr = $('<tr/>'); tr.append("<td>" + products[j]["DESCR"] + "</td>"); tr.append("<td>" + products[j]["RATE"] + "</td>"); tr.append("<td>" + products[j]["APR"] + "</td>"); tr.append("<td>" + products[j]["POINTS"] + "</td>"); $('table').append(tr); } }

There are more items in your json[0]["GROUPS"][i]['PRODUCT'] . I think you also want to focus on them.

Now move your json data to an external file (note the index [0] in json['GROPS'] :

 $(document).ready(function () { $.getJSON( "https://api.myjson.com/bins/4krcq", function( json ) { for (var i = 0; i < json["GROUPS"].length; i++) { products = json["GROUPS"][i]['PRODUCT']; console.log(products); for (var j = 0; j < products.length; j++) { console.log(products[j]); tr = $('<tr/>'); tr.append("<td>" + products[j]["DESCR"] + "</td>"); tr.append("<td>" + products[j]["RATE"] + "</td>"); tr.append("<td>" + products[j]["APR"] + "</td>"); tr.append("<td>" + products[j]["POINTS"] + "</td>"); $('table').append(tr); } } }); });

Parsing JSON for an HTML table using jQuery

More articles: