Get all string values from a nested object

Question

I have an object, with nested objects. How do I target a specific index of the object and loop through all the nested values of image. As you will note the length of the nested objects vary.

Target example: productArray[0].image = test1.png, test2.png, test3.png

var products =  [
    //item1
    {
        identifier: "item-0",
        image: {
            "img1": "test1.png",
            "img2": "test2.png",
            "img3": "test3.png"
        }
    },
    //item2
    {
        identifier: "item-1", 
        image: {
            "img1": "test1.png",
            "img2": "test2.png"
        }
    },
    //item3
    {
        identifier: "item-2", 
        image: {
            "img1": "test1.png",
            "img2": "test2.png",
            "img3": "test3.png",
            "img4": "test4.png",
            "img5": "test5.png",
            "img6": "test6.png",
            "img7": "test7.png"
        }
    }
];

You should accept an answer that solves your problem to show appreciation to other users who tried to help you. This is how stackoverflow works. — Viktor Bahtev
– Viktor Bahtev, Commented Aug 2, 2014 at 16:46

Ryan · Accepted Answer · 2014-06-19 22:45:50Z

1

We can do this. What you need to do is a simple loop through the object at a specific index, or you can target them all. Note that the image object is not an array, so it will not have an accurate length property.

Target all indexes:

for(var i = 0; i < products.length; i++) {
  console.log("Item: " + i);
  var images = products[i].image;
  for(var a in images)
   console.log(images[a]);
}

Target specific:

for(var i in products[0].image)
    console.log(products[0].image[i]);

I used a for loop here, but you can use a while loop if you would like.

example

edited Jun 19, 2014 at 22:45

answered Jun 19, 2014 at 15:53

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

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

Comments

Viktor Bahtev · Accepted Answer · 2014-06-19 16:05:25Z

0

Steps:

You need to iterate over your original array of products. products
Each element (product) will be in format { identifier: "", image : {"img1" : "img2", ..}} products[i]
You get the image property of current product - this is an object. products[i].image
Now you need to iterate over the properties of the image object. products[i].image[j]

Code:

for(var i = 0; i < products.length; i++)
{
  for(var j in products[i].image)
  {
    // Here you have all the images for the current product.
    // You can print them, group them or whatever you want to do with them
    console.log(products[i].image[j]); 
  }
}

Also you can change the code (introduce variables) to be more readable.

answered Jun 19, 2014 at 16:05

Viktor Bahtev

4,9182 gold badges36 silver badges42 bronze badges

Comments

PeterKA · Accepted Answer · 2014-06-19 16:10:18Z

0

var strs = (function( obj ) {
    var ret = [];
    for( im in obj ) {
         ret.push( obj[im] );
         //You could access each image URL here
         //ad strs in the end will have all of them 
         //comma-separated after this code completes
         // im is the key, obj[ im ] the value
    }
    return ret.join(',');
})( products[0].image );

console.log( strs );

WORKING JS FIDDLE DEMO

edited Jun 19, 2014 at 16:10

answered Jun 19, 2014 at 15:59

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

bottens · Accepted Answer · 2014-06-19 17:10:53Z

0

Here is another way of doing this, with newer functions in ECMAScript 5

var images = Object.keys(products[2].image).map(function(key){
    return products[2].image[key]
})

console.log(images) // Returns: ["test1.png", "test2.png", "test3.png", "test4.png", "test5.png", "test6.png", "test7.png"]

How It Works:

Object#keys returns an array of key names. Array#map creates a new array using the keys from Object#keys. By looking up the key from the object you get the value, which will be the image name.

JS FIDDLE

answered Jun 19, 2014 at 17:10

bottens

3,9121 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get all string values from a nested object

4 Answers 4

Comments

Comments

Comments

How It Works:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

How It Works:

Comments

Your Answer

Sign up or log in

Post as a guest

Related