for loop through an array with objects

Question

I'm trying to for loop an array that has various objects, this is my code - any tips?

 var companies = [
                 {name: 'dhillion', imgCount: 1},
                 {name: 'blinds', imgCount: 2},
                 {name: 'honda', imgCount: 2},
                 {name: 'nike', imgCount: 3},
                 {name: 'protilla', imgCount: 3},
                 {name: 'starbucks', imgCount: 4}
                ];

// for(var i =0; i < companies.length; i++){
//     console.log(companies.name + '..' + companies.imgCount);
// }

for(var k in companies){
    console.log(companies.name[k] + '..' + companies.imgCount[k]);
}

Instead of `companies.name[k]` you access it like `companies[k].name` — anteAdamovic, Nov 08 '17 at 23:23
See https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea?lq=1 — Barmar, Nov 09 '17 at 00:06

score -1 · Answer 1 · answered Nov 08 '17 at 23:25

-1

You were close, you were missing to reference the position in the array.

     var companies = [
                 {name: 'dhillion', imgCount: 1},
                 {name: 'blinds', imgCount: 2},
                 {name: 'honda', imgCount: 2},
                 {name: 'nike', imgCount: 3},
                 {name: 'protilla', imgCount: 3},
                 {name: 'starbucks', imgCount: 4}
                ];

for(var i =0; i < companies.length; i++){
    console.log(companies[i].name + '..' + companies[i].imgCount);
}

https://jsfiddle.net/brm0kx2d/

Working example above

answered Nov 08 '17 at 23:25

MikeyT

59
1
4

okay thank you guys, is it better to use for loop or for each? – Harp Nov 08 '17 at 23:31
I personally find for each more readable and you don't have to worry about index bleed over into different iterations. – Taplar Nov 08 '17 at 23:34
As taplar above has stated using jquery will make it easier and $.each is better, but if you do not want to use jquery then the for loop is the solution. – MikeyT Nov 08 '17 at 23:35
@MikeyT modern browsers support native forEach. See my solution below. Ref with browser support at bottom: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach – Taplar Nov 08 '17 at 23:35
@Taplar I missed your forEach, which makes your answer more comprehensive, but without knowing what support he needs I personally would use the for loop without Jquery. Just a personal preference on making sure it will run on everything, as there will be no doubt as much as we hate users using old browser versions, there will always be those who do. – MikeyT Nov 08 '17 at 23:43
okay thank you. Means a lot! I'm new at this stuff so I make a lot of mistakes but I'm grateful for the support. Very humbled by everyones depth and guidance. Hope everyone is having a great day! – Harp Nov 08 '17 at 23:48
now im trying to see if my data-company value matches that of the one in my array..companies.name ex:'dhillion' and if so create that many divs that relate to that object ex: {name: 'dhillion', imgCount: 1} How to do that? I'm trying this var projectImageGallery = document.querySelector('.project-img-gallery'); for(var i =0; i < companies.length; i++){ if(projectImageGallery.dataset.company === companies[i].name){ for(var j = 0; j < companies[i].imgCount; j++){ $('
'); } } } – Harp Nov 09 '17 at 00:08

score -1 · Accepted Answer · answered Nov 08 '17 at 23:28

Personally i'd use the for each logic and let javascript handle the indexes for you.

var companies = [{
    name: 'dhillion',
    imgCount: 1
  },
  {
    name: 'blinds',
    imgCount: 2
  },
  {
    name: 'honda',
    imgCount: 2
  },
  {
    name: 'nike',
    imgCount: 3
  },
  {
    name: 'protilla',
    imgCount: 3
  },
  {
    name: 'starbucks',
    imgCount: 4
  }
];

if (Array.prototype.forEach) {
  //native logic if the browser supports it
  companies.forEach(function(company){
    console.log(company.name);
  });
} else {
  //jQuery logic fallback if it does not, or you could just do this and not worry about testing for the fallback
  $.each(companies, function(index, company){
    console.log(company.name);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

for loop through an array with objects

2 Answers2