jquery reading nested json

Question

I have the following json as seen below. I'm trying to read the values TOP1, TOP2. I'm a little unsure of how to do this.

I'm using the following .. But that just gets me an object which has the nested objects for TOP1 and TOP2. How do I get the values TOP1 and TOP2 ??

$.getJSON('http://localhost/data/menufixed.json',
    function(data) {            
        $.each(data, function(entryIndex, entry) {
            var html = '<li class="top-level">';

        });
    });

And the data below

{
"actions" : [
    {
        "action": "TOP1",
        "subaction": [
            {
                "name": "A" 
            },
            {
                "name": "B" 
            },
            {
                "name": "C" 
            } 
        ] 
    },
    {
        "action": "TOP2",
        "subaction": [
            {
                "name": "X" 
            },
            {
                "name": "Y" 
            } 
        ]

Nick Craver · Accepted Answer · 2010-10-25 17:19:46Z

12

It looks like you want to loop though the .actions, so change this:

$.each(data, function(entryIndex, entry) {
  var html = '<li class="top-level">';
});

To this:

$.each(data.actions, function(entryIndex, entry) {
  var html = '<li class="top-level">' + this.action + '</li>';
});

Using data.actions you're now looping through that array of objects, and those objects are the ones with the .action property, for example: "TOP1" and "TOP2".

answered Oct 25, 2010 at 17:19

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

wmitchell Over a year ago

This is what im after thanks Nick! How might I access the ABC / YX data ?

Nick Craver Over a year ago

@imerez - Inside the $.each() callback above, you would do $.each(this.subaction, function() { alert(this.name); });, that would give you A, B, C, etc. - test it out here: jsfiddle.net/nick_craver/mHvvA/2

wmitchell Over a year ago

Thanks thats what Im after .. thanks for the excellent resource jsfiddle also :P

Surya R Praveen · Accepted Answer · 2020-07-01 10:39:30Z

1

After 10 years i'm answering this equation. Using multidimensional array of objects, the inner value can be retrieved.

$(document).ready(function() {
    $.each(data.actions, function(i, elementText) { 
    displayHTML += '<div><h2>' +elementText.action+ '</h2></div>';

  $.each(elementText.subaction, function(j, elementSubText) { 
  displayHTML += '<li><span>' +elementSubText.name+'</span></li>';
  });
});
$("#listing").append(displayHTML);
});

Here is the fiddle link : https://jsfiddle.net/ssuryar/h9vxeuzn/ - JSFIDDLE

answered Jul 1, 2020 at 10:39

Surya R Praveen

3,7551 gold badge29 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery reading nested json

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related