Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Fleetwood
Daniel Fleetwood
3,840 Points

JSON: Create list from JSON Result / How to loop?

Hi All,

I have had some look with this and can return the first item in the 'Objects' container with this script, my question is how doi loop all the 'Objects' and list them as rows?

if i return 'myArray' in an alert i get the value "object Object"

The output on the page is "1001 / c378a4bd-5564-4565-be95-110d24be3ef2".

Any guidance would be amazing! I have created a fiddle to demonstrate my issue: http://fiddle.jshell.net/xY974/1/

Thanks, Dan

<!DOCTYPE html>
<html>
<body>

<div id="TestOutput"></div>
<script>
var myArray = [
{
   "objects":[
      {
         "className":"RequestManagement.Request",
         "value":"c378a4bd-5564-4565-be95-110d24be3ef2",
         "launchClassName":null,
         "launchValue":null,
         "name":"1001",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      },
      {
         "className":"RequestManagement.Request",
         "value":"959885e5-f1bd-4a4a-9f25-b4bc937b86f3",
         "launchClassName":null,
         "launchValue":null,
         "name":"1002",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      },
      {
         "className":"RequestManagement.Request",
         "value":"9836fe7e-e351-479c-84be-3407eccf9990",
         "launchClassName":null,
         "launchValue":null,
         "name":"1003",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      },
      {
         "className":"RequestManagement.Request",
         "value":"3bc55c9c-7403-44d5-805b-f687c746c37f",
         "launchClassName":null,
         "launchValue":null,
         "name":"1004",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      },
      {
         "className":"RequestManagement.Request",
         "value":"e55e33f1-7d62-4bd0-afbb-9238fe8012a0",
         "launchClassName":null,
         "launchValue":null,
         "name":"1005",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      },
      {
         "className":"RequestManagement.Request",
         "value":"9a9a9710-d361-4136-ab90-4b8e40d18ad7",
         "launchClassName":null,
         "launchValue":null,
         "name":"1050",
         "detail":null,
         "selected":false,
         "activated":false,
         "attributes":{
            "Title":"",
            "Status":"Closed"
         }
      }
   ],
   "objectCount":27758,
   "pageSize":50,
   "pageNumber":0,
   "pageCount":556
}
];

myFunction(myArray);

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '' + arr[i].objects[i].name + ' / ' + 
        arr[i].objects[i].value + '</a><br>';
    }
    document.getElementById("TestOutput").innerHTML = out;
    alert(myArray)
}
</script>

</body>
</html>

3 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Try this:

function myFunction(arr) {
    // arr is an array with one item, an object
   // you can capture the array stored in the 'objects'
    var objs = arr[0].objects;
    var out = "";
    // then loop through the array of objects
    for( var i = 0; i<objs.length; i++) {
        // then loop through the properties of the each object in the array
        for (prop in objs[i]) { 
            out += '' + prop + ' / ' + 
            objs[i][prop] + '</a><br>';
         }
    }
    document.getElementById("TestOutput").innerHTML = out;
}
Victor Rodriguez
Victor Rodriguez
15,015 Points
Victor Rodriguez
Victor Rodriguez
15,015 Points

well you need another loop nested inside of that first loop. I'm not exactly using an editor to test this but it should be somewhere along the lines of 

for(var i = 0; i < arr.length; i ++){  //loops through objects
    for(var j = 0; j < arr[i].length; j++){ //loops through object members
        arr[i].objects[j].value; //access value of object[j] in arr at i 
    }
}
Daniel Fleetwood
Daniel Fleetwood
3,840 Points
Daniel Fleetwood
Daniel Fleetwood
3,840 Points

Thank you very much guys, that makes perfect sense and worked a treat!

For anyone who comes across this in the future, you can see a working version at http://fiddle.jshell.net/xY974/4/

Thanks, Dan