How to access nested json object and display using javascript dynamically?

Question

New to all of this, but the jest of the program is for json data to populate a listview dynamically as well as when user clicks on the listview href it sends them to the page and dynamically loads the content for that specific page (text, image, and any url's) into specific separate divs. The key is to be dynamic using json data. Please help.

This is my JavaScript/HTML code as well as JSON data:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
<script>
    $(document).on("pagebeforeshow", "#ccc", function() {

  $.getJSON('js.json', function(data) {
    var output = "";
    var newpage = "";
    for(var i in data.mydata) {
      output += "<li>" +
        "<a href=\"#page" + data.mydata[i].myId + "\">" +
        "<h3>" + data.mydata[i].thename + "</h3>" +
        "<p>" + data.mydata[i].description + "</p>" + "</a>" +
        "</li>";
    if ($("#page" + data.mydata[i].myId).length == 0 && (data.mydata[i].myId == 0)) {
        newpage += "<div data-role=\"page\" id=\"page" + data.mydata[i].myId + "\">";
        newpage += "<div data-role=\"header\">" + "<a data-role=\"button\" data-rel=\"back\" data-icon=\"back\">Back</a>" + "<h3>" + data.mydata[i].thename + "</h3></div>";
        newpage += "<div role=\"main\" class=\"ui-content\">" + "<h1 >What type of Nursing is right for you?</h1>" +"</div>";
            //how to grab nested objects with for loop such as link 
            //  for loop that grabs myId AS WELL AS LINKid/textid/pictureID and displays 

        newpage += "<div data-role=\"footer\">" + "<h1>0Future Nurses</h1>"+ "<p class= \"center\">Telephone: <br/>" +
        +"</div>"+"</div>";
      }

    output += "";
    newpage += "";
    $('body').append(newpage);
    $("#mylist").html(output).listview('refresh');
  };
});
});

</script>
</head>
<body>
<div data-role="page" id="ccc">
  <div data-role= "header">
        <h1>Future Nursings</h1>
        <h2 class = "center">Action Coalition</h2>

  <div role="main" class="ui-content">
    <ul id="mylist" data-role="listview" data-inset="true">

    </ul>

  </div>
</div>

<div data-role="footer" >
        <h1>Future Nurses</h1>
        <p class= "center">Telephone: <br/>
        Email: </p>
        <h1>Get Social with us!</h1>
            <div class = "centerButton">
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
            </div>
    </div>
</div>






<div data-role="page" id="ccc">
  <div data-role= "header">
        <h1>Future Nurses</h1>
        <h2 class = "center">Action Coalition</h2>

  <div role="main" class="ui-content">
    <ul id="mylist" data-role="listview" data-inset="true">

    </ul>

  </div>
</div>

<div data-role="footer" >
        <h1>Future Nurses </h1>
        <p class= "center">Telephone: <br/>
        Email: </p>
        <h1>Get Social with us!</h1>
            <div class = "centerButton">
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Facebook</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Twitter</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Indeed</a></button><br/>
                <a href = "#" class = "ui-btn  ui-corner-all ui-shadow ui-btn-inline">Join Us</a></button><br/>
            </div>
    </div>
</div>
</body>
</html>





{
"mydata": [
    {
        "myId": "0",
        "thename": "Is Nursing for You?",
        "description": "This is the zero description",
        "links":[
            "google.com",
            "yahoo.com",
            "worldstarhiphop.com"
        ],
        "text": [
            "random text 0000",
            "random text 0000",
            "random text 0000"
        ],
        "imgPath": [
           "image/0000.png",
           "image/0001.png",
           "image/0002.png"
           ],
        "article" : [
            {
                "text": "random article 0",
                "img" : "image/0000.png"
            },
            {
                "text": "random article 0",
                "img" : "image/0000.png"
            }
            ]
    }, {
        "myId": "1",
        "thename": "Nursing Schools",
        "description": "This is the one description",
        "links":[
            "nordstrom.com",
            "google.com",
            "aol.com"
        ],
        "text": [
            "random text 0001"
        ],
        "imgPath": [
           "image/0100.png",
           "image/0101.png",
           "image/0102.png"
           ],
        "article" : [
            {
                "text": "random article 0001",
                "img" : "image/0001.png"
            }
            ]
    }
]

}

possible duplicate of stackoverflow.com/questions/45257707/… — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Jul 25, 2017 at 8:02
i was trying to access deeper into object at the link, text or image level — Adam Zeigler
– Adam Zeigler, Commented Jul 25, 2017 at 8:11
hi @adamzeigler why not simply use another for inside the first loop? — Kup
– Kup, Commented Jul 25, 2017 at 8:15
Please help I am suffering XD We all did, we all are, and believe me when I say you aren't done yet. — Jeremy Thille
– Jeremy Thille, Commented Jul 25, 2017 at 8:15
for(var i in data.mydata) { for( var j in data.mydata.link or [ link]){ and will this allow me to access the linkId} and wouldn't that mess with my if statement — Adam Zeigler
– Adam Zeigler, Commented Jul 25, 2017 at 8:27

David Vicente · Accepted Answer · 2017-07-25 09:00:45Z

1

I think your errors could be because your json is not well formatted, you missed a ] at the end. It should finishes like this:

              {
                    "image": "image/2.png"
                }
            ]
    }
    ]
};

In order to access to deep elements, you can use this approach (changing link string for the elements you want to find:

 for (var element of data.mydata) {
      console.log(element.myId);
      var linkElements = element.link.filter(linkObject => {
        return linkObject["link"];
      });

      for (var linkElement of linkElements) {
        console.log(linkElement["link"]);
      }
    }

This would be the output of this code:

0
google.com
yahoo.com
worldstarhiphop.com

1
google.com
yahoo.com
worldstarhiphop.com

answered Jul 25, 2017 at 9:00

David Vicente

3,1311 gold badge20 silver badges27 bronze badges

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

4 Comments

Adam Zeigler Over a year ago

i tried both of these scenarios and no success i'm not sure why? or whats going on

Adam Zeigler Over a year ago

The only thing that I have changed is my json data it's a little more cleaner and streamline here still cant access (changed original document).

Adam Zeigler Over a year ago

trying to reach links:

Adam Zeigler Over a year ago

for(var j in data.mydata.myId) { output += "<li>" + "" + data.mydata[i].description + "" + "" + data.mydata.myId[j].links+ "" + "" + data.mydata.myId[j].links[j]+ "" + "" + data.mydata.myId[j].links[0]+ "" + "" + data.mydata[i].myId[j].links + "" + "" + data.mydata[i].myId[j].links[0] + "" + "</li>";

Kup · Accepted Answer · 2017-07-25 09:09:30Z

See if this helps

$.getJSON('js.json', function(data) {
    var output = [],
        newpage = [];
    for(var i in data.mydata) {
        output.push('<li>');
            output.push('<a href="#page' + data.mydata[i].myId + '">');
                output.push('<h3>' + data.mydata[i].thename + '</h3>');
                output.push('<p>' + data.mydata[i].description + '</p>');
            output.push('</a>');
        output.push('</li>');

        if ($('#page' + data.mydata[i].myId).length === 0 && (data.mydata[i].myId === 0)) {
            newpage.push('<div data-role="page" id="page' + data.mydata[i].myId + '">');
                newpage.push('<div data-role="header">');
                    newpage.push('<a data-role="button" data-rel="back" data-icon="back">Back</a>');
                    newpage.push('<h3>' + data.mydata[i].thename + '</h3>');
                newpage.push('</div>');
                newpage.push('<div role="main" class="ui-content">');
                    newpage.push('<h1 >What type of Nursing is right for you?</h1>');
                newpage.push('</div>');

            if (data.mydata[i].link.length) { 
                for(var e in data.mydata[i].link) {
                    console.log(data.mydata[i].link[e]);
                    // Do stuff here i guess
                }
            }

            newpage.push('<div data-role="footer">');
                newpage.push('<h1>0Future Nurses</h1>');
                newpage.push('<p class="center">Telephone:<br/></p>');
            newpage.push('</div>');
        }
    }

    $('body').append(output.join(''));
    $('#mylist').html(output.join('')).listview('refresh');
  };

Also as @david mentioned, you've got a problem on your json object, it's missing the end of the first array object [mydata]

{
    "mydata": [
        {
            "myId": "0",
            "thename": "Is Nursing for You?",
            "description": "This is the zero description",
            "link": [
                {
                    "linkId": "0"
                },
                {
                    "link": "google.com"
                },
                {
                    "linkId": "1"
                },
                {
                    "link": "yahoo.com"
                },
                {
                    "linkId": "2"
                },
                {
                    "link": "worldstarhiphop.com"
                }
            ],
            "text": [
                {
                    "textId": "0"
                },
                {
                    "text": "CareerTracks, this is the 1st"
                },
                {
                    "textId": "1"
                },
                {
                    "text": "this is the 2nd"
                },
                {
                    "textId": "2"
                },
                {
                    "textId": "1"
                },
                {
                    "text": "CareerTracks this is the 3rd"
                }
            ],
            "imgPath": [
                {
                    "imageId": "0"
                },
                {
                    "image": "image/0.png"
                },
                {
                    "imageId": "1"
                },
                {
                    "image": "image/1.png"
                },
                {
                    "imageId": "2"
                },
                {
                    "image": "image/2.png"
                }
            ]
        },
        {
            "myId": "1",
            "thename": "Nursing Schools",
            "description": "This is the second description",
            "link": [
                {
                    "linkId": "0"
                },
                {
                    "link": "google.com"
                },
                {
                    "linkId": "1"
                },
                {
                    "link": "yahoo.com"
                },
                {
                    "linkId": "2"
                },
                {
                    "link": "worldstarhiphop.com"
                }
            ],
            "text": [
                {
                    "textId": "0"
                },
                {
                    "text": "CareerTracks, this is the 1st"
                },
                {
                    "textId": "1"
                },
                {
                    "text": "this is the 2nd"
                },
                {
                    "textId": "2"
                },
                {
                    "textId": "1"
                },
                {
                    "text": "CareerTracks this is the 3rd"
                }
            ],
            "imgPath": [
                {
                    "imageId": "0"
                },
                {
                    "image": "image/0.png"
                },
                {
                    "imageId": "1"
                },
                {
                    "image": "image/1.png"
                },
                {
                    "imageId": "2"
                },
                {
                    "image": "image/2.png"
                }
            ]
        }
    ]
}

Collectives™ on Stack Overflow

How to access nested json object and display using javascript dynamically?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related