CODEWITHSUNDEEP
javascriptjqueryhtmljson
Adam Zeigler
Adam Zeigler

Reputation: 69

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

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

}

Upvotes: 1

Views: 840

Answers (2)

Kup
Kup

Reputation: 884

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

Upvotes: 0

David Vicente
David Vicente

Reputation: 3121

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

Upvotes: 1

Related Questions