Creating html elements through nested JSON objects

Question

So I've managed to successfully create HTML elements through JSON objects before, but now that I've changed my JSON objects to nested JSON, I am not able to reproduce the HTML elements accordingly. I am pretty new to programming so can anyone help me find out where I have gone wrong?

JSON File:

{  
  "ThreeG": [
    {
        "title":"Testing 1",
        "filePath":"https://example.com",
        "imagePath":"images/test.jpg"
    },
    {
        "title":"Testing 2",
        "filePath":"https://example.com",
        "imagePath":"images/test2.jpg"
    }
   ]
}

Script:

<script>
    $.ajax({
      url : "TestFiles.json",
      type : "post", 
      contentType:"application/json",
      success : function(list){           
          var divCol  = "<div class='col-md-offset-1 col-sm-5 col-md-5'>";
          var divWell = "<div class='well' style='position:relative'>";
          var divClose= "</div>";

          list.forEach(function(obj, index) {

            var title     = "<h4>"      + obj.ThreeG.title    + "</h4>";
            var linkStart = "<a href='" + obj.ThreeG.filePath + "' target='_blank'>" ;
            var image     = "<img data-toggle='tooltip' data-placement='left' title='Click to open data' src='" + obj.ThreeG.imagePath + "' height='100%' width='100%'/>"
            var linkEnd   =  "</a>";

            var div = divCol    +
            divWell     +
            title       +
            linkStart       +
            image       +
            linkEnd +
            divClose +
            divClose;

            console.log(obj);
           $("#test").append(div); 

           })
        }
    });
  </script>

riyaz-ali · Accepted Answer · 2017-06-08 08:33:36Z

1

The list param in the success callback is an object with property / key ThreeG. So instead of list.forEach, you should do list.ThreeG.forEach, then each obj in the forEach callback will be the json object that you can use to create HTML elements.

list.ThreeG.forEach(function(obj, index) {
         console.log(obj); // { "title":"Testing 1", "filePath":"https://example.com", "imagePath":"images/test.jpg" } for the first object
}

answered Jun 8, 2017 at 8:33

riyaz-ali

9,1322 gold badges26 silver badges40 bronze badges

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

4 Comments

nurul98 Over a year ago

I've tried that but it is not working and the console did not output anything

riyaz-ali Over a year ago

@nurul98 replace list.forEach with this in the above script

nurul98 Over a year ago

replace it with what?

riyaz-ali Over a year ago

What version of jQuery are you using? and is the list object a JSON string or a parsed javascript object (normally, it should be a parsed JS object, though)

Pankaj Shukla · Accepted Answer · 2017-06-08 08:38:49Z

0

var obj = {  
  "ThreeG": [
    {
        "title":"Testing 1",
        "filePath":"https://example.com",
        "imagePath":"images/test.jpg"
    },
    {
        "title":"Testing 2",
        "filePath":"https://example.com",
        "imagePath":"images/test2.jpg"
    }
   ]
};

for(var i=0;i<obj.ThreeG.length;i++) {
var data = obj.ThreeG[i];//Take a reference here
console.log(data.title, data.filePath, data.imagePath);
}

You cannot say obj.ThreeG.title since obj.ThreeG is an array. You need to use obj.ThreeG[0].title and obj.ThreeG[1].title etc.

Do some looping as shown above.

edited Jun 8, 2017 at 8:38

answered Jun 8, 2017 at 8:27

Pankaj Shukla

2,6722 gold badges13 silver badges18 bronze badges

5 Comments

nurul98 Over a year ago

May I ask, where do I put that for loop in my script?

Pankaj Shukla Over a year ago

@nurul98 Assuming list is also an array, you can do it inside the function function(obj, index) {.

Pankaj Shukla Over a year ago

@nurul98 What is list?

nurul98 Over a year ago

list is the data that I've sent to the ajax

Pankaj Shukla Over a year ago

@nurul98 list is the data that you got from ajax call not sent. What do you get when you do console.log on list?

Collectives™ on Stack Overflow

Creating html elements through nested JSON objects

2 Answers 2

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related