Get values from nested json with each loop

Question

I need to get the values from JSON and show them in a HTML table.

Below is my JSON:

[
  {
    "id": "3",
    "title": "Doing Business In...",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "HR"
      },
      {
        "businessSubjectArea": "Legal"
      },
      {
        "businessSubjectArea": "Finance"
      },
      {
        "businessSubjectArea": "Tax"
      },
      {
        "businessSubjectArea": "Treasury"
      },
      {
        "businessSubjectArea": "IT"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "Australia.html",
        "url": ""
      }
    ],
    "error": null
  },
  {
    "id": "65",
    "title": "Dialing Instructions",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Administrative"
      }
    ],
    "attachmentFiles": [

    ],
    "error": null
  },
  {
    "id": "132",
    "title": "WA - Western Australia - Drilling Fluid Management",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "Legal"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "",
        "url": ""
      }
    ],
    "error": null
  },
  {
    "id": "133",
    "title": "WA - Natural gas from shale and tight rock - Overview of WA regulatory framework",
    "businessSubjectAreas": [
      {
        "businessSubjectArea": "Market and Sell Products/Service"
      },
      {
        "businessSubjectArea": "Deliver Products/Services"
      },
      {
        "businessSubjectArea": "Legal"
      }
    ],
    "attachmentFiles": [
      {
        "fileName": "",
        "url": ""
      }
    ],
    "error": null
  }
]

Below is my jQuery code:

$.each(json, function(index, value) {
  $("#id_kbdata").append(
    " <tr><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>" +
    this.title +
    "</td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "

    +
    "<ul>" +
    $.each(this.businessSubjectAreas, function(index, value) {
      "<li>" + this.businessSubjectArea + "</li>"
    }) +
    "</ul>" +

    " </td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "

    +
    "<ul>" +
    $.each(this.attachmentFiles, function(index, value) {
      "<li><a href=" + this.url + ">" + this.fileName + "</a></li>"
    }) +
    "</ul>" +

    " </td></tr>"
  );
});

Here I am unable to get the values from JSON with inner each loop like this.businessSubjectArea, I am getting those values as [object Object], this.title is working fine. I have removed values from JSON as it is sensitive data.

How can I access the values this.businessSubjectArea, this.url etc. with my jQuery code?

value.businessSubjectArea

Nikhil Aggarwal
– Nikhil Aggarwal

2018-04-09 06:25:42 +00:00
Commented Apr 9, 2018 at 6:25 — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Apr 9, 2018 at 6:25

Praveen Kumar Purushothaman · Accepted Answer · 2018-04-09 06:27:36Z

2

Use value as the inner item

$.each(this.businessSubjectAreas, function(index, value) {
    "<li>" + value.businessSubjectArea + "</li>"
})

And same for the attachmentFiles

$.each(this.attachmentFiles, function(index, value) {
      "<li><a href=\"" + value.url + "\">" + value.fileName + "</a></li>"
})

edited Apr 9, 2018 at 6:27

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered Apr 9, 2018 at 6:26

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

vamsi Over a year ago

I tried with value.businessSubjectArea but still getting [object Object], don't understand why:-(

vamsi Over a year ago

Thanks for the help.

kalai · Accepted Answer · 2018-04-09 06:57:10Z

Try this ,its working for me

var id;
        $.each(json, function (index, value) {
            id = value.id;
            debugger;
            $("#id_kbdata").append(
                " <tr><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'>"
                + value.title +
                "</td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "
                + "<ul id='demoul_"+value.id+"'></ul>" +
                " </td><td style='text-align:left;font-family:arial;padding:5px 10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;width:33%;'> "
                + "<ul id='demourl_" + value.id + "'></ul>" +

                " </td></tr>"
            );

            $.each(value.businessSubjectAreas, function (index, value) {
                $('#demoul_' + id + '').append("<li>" + value.businessSubjectArea + "</li>");
            })
            $.each(value.attachmentFiles, function (index, value) {
                $('#demourl_' + id + '').append("<li><a href=" + value.url + ">" + value.fileName + "</a></li>");
            })
        });

Collectives™ on Stack Overflow

Get values from nested json with each loop

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related