javascript - Parsing JSON to HTML table using jQuery -
i using below code parse json file, getting undefined in each table column.
<!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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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; (var = 0; < 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>
check this:
for (var = 0; < json[0]["groups"].length; i++) { products = json[0]["groups"][i]['product']; console.log(products); (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); } } your json[0]["groups"][i]['product'] has more elements. think want loop trough well.
now moving json data external file (notice no [0] index in json['grops']:
$(document).ready(function () { $.getjson( "https://api.myjson.com/bins/4krcq", function( json ) { (var = 0; < json["groups"].length; i++) { products = json["groups"][i]['product']; console.log(products); (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); } } }); });
Comments
Post a Comment