Loop through JavaScript array and exclude the array itself

Question

I am trying to loop through a JS object parsed from JSON code in [this.props.dataPro.links]:

 "links" : 
[ "/static/media/0.jpg",
  "/static/media/1.jpg",
  "/static/media/1.jpg" ],

I am inserting these links by array key into an images object:

_getStaticImages() {
    let images = [this.props.dataPro.links]
    for (var key in images) {
      if (images.hasOwnProperty(key)) {
        var obj = images[key];
         for (var prop in obj) {
           if (obj.hasOwnProperty(prop)) {
            images.push({
            original: obj[prop],
            thumbnail:obj[prop]
          });
        }
      }
     }
   }


    return images;
  }

As a result I get an empty returned object at the beginning of my return object, when I do a console.log on the images response it seems I also return the array object itself:

[Array[3], Object, Object, Object]
0:Array[4]
1:Object
2:Object
3:Object

How can I sort loop through my array and exclude the array itself?

I'm still not understanding why you are iterating with a for .. in loop. Why not just iterate by dereferencing the array links[i] or use Array.forEach()? — zero298
– zero298, Commented Aug 29, 2016 at 21:31
@zero298 He's using for .. in because links is a property — Aaron
– Aaron, Commented Aug 29, 2016 at 21:31
@Aaron but it looks like the value of links is an array and that is what he is looping over. — Cave Johnson
– Cave Johnson, Commented Aug 29, 2016 at 21:32
@Aaron But he is iterating links and links is defined: "links": [...]. So links itself is an array and can be iterated as such. — zero298
– zero298, Commented Aug 29, 2016 at 21:33

Jonathan · Accepted Answer · 2016-08-29 21:40:40Z

3

You are adding the initial array to your output let images = [this.props.dataPro.links]. Instead, you could use Array.map ideally here:

var linkObj = {
  "links": [
    "/static/media/0.jpg",
    "/static/media/1.jpg",
    "/static/media/1.jpg"
  ]
};

function getStaticImages() {
  let output = linkObj.links.map(imgUrl => {
    return {
      original: imgUrl,
      thumbnail: imgUrl
    }
  });
  return output;
}

console.log(getStaticImages());

answered Aug 29, 2016 at 21:40

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

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

3 Comments

The Witness Over a year ago

Using map(). Chapeu bas. I have to remember this approach.

Aaron Over a year ago

@Jonathan Arrow functions are not supported in IE..? May be worth considering

Jonathan Over a year ago

IE <= Arrow functions?

zero298 · Accepted Answer · 2016-08-29 21:38:43Z

1

I would use Array.prototype.map() and do something like this:

getStaticImages(imageArray) {
  return imageArray.map(function(img) {
    return {
      original: img.whateverPropMapsToOriginal,
      thumbnail: img.whateverPropMapsToThumbnail,
    }
  });
}

answered Aug 29, 2016 at 21:38

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Comments

Daphoque · Accepted Answer · 2016-08-29 21:43:23Z

1

var images = [];
for(var i = 0; i < this.props.dataPro.links.length;i++)
{
   images.push({
     original: this.props.dataPro.links[i],
     thumbnail: this.props.dataPro.links[i]
   });
}

answered Aug 29, 2016 at 21:43

Daphoque

4,6781 gold badge24 silver badges35 bronze badges

Comments

The Witness · Accepted Answer · 2016-08-29 21:46:12Z

As for why do you have array as first element first, this line:

let images = [this.props.dataPro.links]

in which you create array images with first element of array that you are going to iterate through.

To create an empty array, don’t put any values inside:

let images = []; // nothing inside

As for iterating itself. Given that this.props.dataPro.links is already array, to iterate through it you should go like that:

var myArray = this.props.dataPro.links; // so we don’t need to type it later
var images = []; // we’re creating *empty* table
for (var i = 0; i < myArray.length; ++i) {
    console.log('Item', i, myArray[i]);
    images.push({
        original: item,
        thumbnail: item
    });
}

That’s the old way of doing it. If you are supporting from IE9 up, then you can use function Array.prototype.forEach:

var images = [];
this.props.dataPro.links.foreach(function (item, index) {
    console.log('Item', index, item);
    images.push({
        original: item,
        thumbnail: item
    });
}

Don’t use the second solution, if you want to optionally break iterating through the array.

Caleb Anthony · Accepted Answer · 2016-08-29 21:45:03Z

0

Why not change your for loop?

for (let i = 1; i > obj.length; i++) {
  if (obj[i]) {
    images.push({
      original: obj[prop],
      thumbnail: obj[prop]
    })
  }
}

This skips the 0th element of the array (the object you want to skip), but still pushes the images you want.

answered Aug 29, 2016 at 21:45

Caleb Anthony

1,1239 silver badges19 bronze badges

Collectives™ on Stack Overflow

Loop through JavaScript array and exclude the array itself

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related