display a json array in html table

Question

I am trying to display a JSON array in HTML which I get as response is

[
  {
    "New  upto 3 Yrs": 40.0,
    "Above 3 yr to 9 yrs": 35.0,
    "Above 9 yrs upto 12 yrs": 30.0
  }
]

here i am getting value undefined. (see snap shot output image ) How can I display this kind of JSON in HTML as a html table?

here is my script:

 success: function (data) {
            if (objMotorUnderwritingList.ddlVehicleType == "TW$") {
               // alert("hi TW$");
                if (data.jsDiscoundGridList != 0) {

                        var eachrow = "<tr>"
                                    + "<td>" + data.jsDiscoundGridList[0]["New upto 3 Yrs"] + "</td>"
                                    + "<td>" + data.jsDiscoundGridList[0]["Above 3 yr to 9 yrs"] + "</td>"
                                    + "<td>" + data.jsDiscoundGridList[0]["Above 9 yrs upto 12 yrs"] + "</td>"
                                    + "</tr>";
                        $('.tbody').html(eachrow);

                    }
                else {
                    ShowAlert("Something Wrong in TW");
                } 
            }}

looks like extra spaces (in keys) issue to me

Muhammad Usman
– Muhammad Usman

2018-06-06 20:10:59 +00:00
Commented Jun 6, 2018 at 20:10 — Muhammad Usman
– Muhammad Usman, Commented Jun 6, 2018 at 20:10

Luca Kiebel · Accepted Answer · 2018-06-06 20:14:02Z

1

You have extra spaces in your property names, you can access the properties just fine if you change that:

Your code:

let data = {
  jsDiscoundGridList: [{
    "New  upto 3 Yrs": 40.0,
    "Above 3 yr to 9 yrs": 35.0,
    "Above 9 yrs upto 12 yrs": 30.0
  }]
};

console.log(data.jsDiscoundGridList[0]["New upto 3 Yrs"]); // undefined
//                                         ^

With correct spacing:

let data = {
  jsDiscoundGridList: [{
    "New  upto 3 Yrs": 40.0,
    "Above 3 yr to 9 yrs": 35.0,
    "Above 9 yrs upto 12 yrs": 30.0
  }]
};

console.log(data.jsDiscoundGridList[0]["New  upto 3 Yrs"]); // 40
//                                         ^^

answered Jun 6, 2018 at 20:14

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

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

3 Comments

Rikin Over a year ago

with weird keys like this, I would rather go with Object.keys and read based on each key.

Luca Kiebel Over a year ago

Yes, great idea!

Aayush Patil Over a year ago

thanx for the solution, I tried this but not getting value in HtML table, i need to bind this value into HTML Table

Collectives™ on Stack Overflow

display a json array in html table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related