JS How to get the object value from an array inside of an array inside an each loop

Question

am trying to get the value from the json file

Here is a live codepen of what I am working on codepen.io/krm218/pen/vGvaNN

Here is a screenshot of my json file or go to https://api.myjson.com/bins/4ky5s

I'm trying to retrieve the main-view, alt-view-1, etc.. from the images array. I've been able to get the other values like description and id with this code

 $.getJSON("json.json", function(data){
  $.each(data.products, function() {
  $("#results").append(
   this["id"] + this["description"]
   );   
  });  
});

When I do this["images"], I get

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How can I get those values?

images is another array, you can get those values the same way you're doing it with the other values, a loop and accessing the objects inside the array, and then the properties etc. — adeneo
– adeneo, Commented May 6, 2016 at 21:51
looks like you're coercing the image objects into strings. Are you using the + operator on this["images"] somewhere? — Aweary
– Aweary, Commented May 6, 2016 at 21:54
@maioman that worked. Thank you!! It was this.images[0]['main-view'] — Ken Ryan
– Ken Ryan, Commented May 6, 2016 at 22:28

omarjmh · Accepted Answer · 2016-05-06 22:19:13Z

1

Here is how you can get in there:

Working Example

var arr = obj.products;

for (var i = 0; i < arr.length; i++) {
  var images = arr[i].images;
  for (var img in images) {
    console.log(images[img]);
  }
}

answered May 6, 2016 at 22:19

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

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

3 Comments

Ken Ryan Over a year ago

Would this go inside the each loop that I have ? See code here codepen.io/krm218/pen/vGvaNN

omarjmh Over a year ago

well all you need to do now, is change var arr = obj.products to var arr = data.products, which I just tried in the pen and it works

Ken Ryan Over a year ago

I see! Thank you @JordanHendrix.

user1189882 · Accepted Answer · 2016-05-06 22:17:09Z

I modified your JSON a little, so that the images are stored as an object (like an associative array) under your product object, so here's where I started with the JSON (I only added one product):

var data = {
  products:[
    {
      description:'Matte black',
      id:1,
      images:{
        "main-view":'/images/1/mainView.png',
        "alt-view-1":"/images/1/altView1.png",
        "alt-view-2":"/images/1/altView2.png",
        "alt-view-3":"/images/1/altView3.png",
        "alt-view-4":"/images/1/altView4.png",
        "alt-view-5":"/images/1/altView5.png"
      }
    }
  ]
};

With them in that format, you can use the jQuery each function to loop through the images, with the parameters being the key name and value in the each function. You can build an image list of them (or use the values however) by looping and using k and v to print their key and value respectively:

$.each(data.products, function(){

  var imageList = $("<div>").addClass("image-list");

  $.each(this.images, function(k, v){
    imageList.append(
      $("<div>").addClass('image').append(
        $("<span>").addClass('image-name').append(k + " = "),
        $("<span>").addClass('image-url').append(v)
      )
    );
  });

  $('#results').append(
    $("<div>").addClass('product').append(
      $("<div>").addClass('product-id').append(this.id),
      $("<div>").addClass('product-desc').append(this.description),
      imageList
    )
  );
});

The results should appear like this:

1
Matte black
main-view = /images/1/mainView.png
alt-view-1 = /images/1/altView1.png
alt-view-2 = /images/1/altView2.png
alt-view-3 = /images/1/altView3.png
alt-view-4 = /images/1/altView4.png
alt-view-5 = /images/1/altView5.png

Here's a Fiddle demonstrating: https://jsfiddle.net/5yc733k4/

hi @mark.hch thanks for your response. Unfortunately I'm not able to change the json file structure so have to figure out how to do it the way it is.

Ken Ryan · Accepted Answer · 2016-05-06 22:29:32Z

0

this.images[0]['main-view'] did the trick!

answered May 6, 2016 at 22:29

Ken Ryan

5491 gold badge12 silver badges35 bronze badges

Collectives™ on Stack Overflow

JS How to get the object value from an array inside of an array inside an each loop

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related