Parsing JSON to HTML table using jQuery

Question

I am using below code to parse a JSON file, but I am 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 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>

Alex Tartan · Accepted Answer · 2015-07-02 09:24:45Z

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

Your json[0]["GROUPS"][i]['PRODUCT'] has more elements. I think you want to loop trough those as well.

Now moving your json data to an external file (notice no [0] index 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);
           }
       } 
    });
});

Radu Gheorghies · Accepted Answer · 2015-07-02 07:37:43Z

replace your 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);
        }
    });

shiva kumar · Accepted Answer · 2015-07-02 07:58:36Z

3

Try this out. 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);
       });              
    });

answered Jul 2, 2015 at 7:58

shiva kumar

1215 bronze badges

Comments

Raghavendra · Accepted Answer · 2015-07-02 07:25:07Z

2

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

edited Jul 2, 2015 at 7:25

answered Jul 2, 2015 at 7:23

Raghavendra

3,5901 gold badge19 silver badges18 bronze badges

Comments

Manoj · Accepted Answer · 2015-07-02 07:27:22Z

2

Try json[0].GROUPS[i].PRODUCT[0].DESCR instead 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

answered Jul 2, 2015 at 7:27

Manoj

5,0913 gold badges34 silver badges59 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:28Z

2

Loop over each object, push in string array and join them. Append in target table, it 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('')));
});

please see it Parsing JSON objects for HTML table

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jul 2, 2015 at 8:02

Kamruzzaman

1,4431 gold badge12 silver badges14 bronze badges

Collectives™ on Stack Overflow

Parsing JSON to HTML table using jQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related