CODEWITHSUNDEEP
javascriptjqueryarraysjson
vamsi
vamsi

Reputation: 1586

Get values from nested json with each loop

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?

Upvotes: 0

Views: 76

Answers (2)

kalai
kalai

Reputation: 186

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

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68635

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

Upvotes: 2

Related Questions