Iterating over objects in a JSON array with JavaScript

Question

I am trying to rewrite a .php multi-dimentional array and foreach loop (the one used in the "Sponsor Flip Wall" jQuery example found at http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/) in JSON/JavaScript, as unfortunately the Web host I am being forced to use does not have PHP support.

The array originally looked as follows:

$sponsors = array(
array('facebook','The biggest social network in the world.','http://www.facebook.com/'),
array('adobe','The leading software developer targeted at web designers and developers.','http://www.adobe.com/'),
array('microsoft','One of the top software companies of the world.','http://www.microsoft.com/')
);

and I now have the following:

var sponsors = [
    { "name": "facebook", "description": "The biggest social network in the world.", "website": "http://www.facebook.com/" },
    { "name": "adobe", "description": "The leading software developer targeted at web designers and developers.", "website": "http://www.adobe.com/" },
    { "name": "microsoft", "description": "One of the top software companies of the world.", "website": "http://www.microsoft.com/" },
];

However I am stumped at the foreach loop, as I don't believe JavaScript has a direct comparison? Upon research, it seems I will either need to use the jQuery $.each or for loops within for loops.

I was looking at the answer to How do I iterate over a JSON structure? but is seems that their array only contains two values - an object and a key. Mine has multiple fields per object so I don't think it completely applies? Or if it does, I don't know how to expand upon it?

The .php foreach loop I am trying to recreate:

foreach($sponsors as $company)
    {
        echo $company[0] . ":" . $company[1] . "(" . $company[2] . ")"; //eg.
    }

Any ideas? (I would prefer my answer was written purely in JavaScript as opposed to jQuery, if possible)

score 1 · Answer 1 · answered Jun 11 '13 at 11:21

1

for( var i = 0; i < sponsors.length; i++) {
    var sponsor = sponsors[i];
    console.log(sponsor.name);
}

Using a standard for loop will work well, providing you know the key names for the data!

answered Jun 11 '13 at 11:21

rorypicko

4,194
3
26
43

score 1 · Answer 2 · answered Jun 11 '13 at 11:26

1

Try:

sponsors.forEach(function(sp) {
    console.log(sp.name);
    console.log(sp.description);
});

answered Jun 11 '13 at 11:26

vusan

5,221
4
46
81

score 1 · Answer 3 · answered Jun 11 '13 at 11:32

1

Forget for (var i = ... and for i in ...and use underscore.js It works in all browsers and is easy to use. So just use for example _.each():

_(array).each(function(item) {
  // Works everywhere
});

answered Jun 11 '13 at 11:32

lukas.pukenis

13,057
12
47
81

score 0 · Answer 4 · edited May 23 '17 at 12:18

0

Take a look a this question and answer here, very similar to what you are asking.

JavaScript alternative to "for each" loop

edited May 23 '17 at 12:18

Community

1
1

answered Jun 11 '13 at 11:25

Joe

2,085
1
18
28

score 0 · Accepted Answer · answered Jun 11 '13 at 11:25

0

You can try this

for( var i = 0; i < sponsors.length; i++) {
    var sponsor = sponsors[i];
    document.writeln(sponsor.name + ":" + sponsor.description + "(" + sponsor.website + ")");        
}

answered Jun 11 '13 at 11:25

DevZer0

13,433
7
27
51

Iterating over objects in a JSON array with JavaScript

5 Answers5