Javascript loop object array

Question

Hi i m trying to get the data from a loop i wrote to go through a object and get some data from there.

my object looks like this

    { 
id:12, 
cities:[london, lisbon, berlin],
images[{id:1, image_urls:abc,},{id:2, image_url:bcd}, {id:3, image_url: cde}], 
status: "published"

}

the function i wrote is to get the image_url data from this object:

 imagesUrlFunction() {
    console.log("array Length");
    console.log(this.images.length);
    let keys = this.images.length;

    for (let n = 0; n < keys; n++) {
      this.imagesUrls = this.images[n].image_url;

      console.log("imageUrlMedia Var");
      console.log(this.imagesUrls);
      // console.log(this.images[n]);
    }
  }

When i console log this.imagesUrls i can get my data, that is my url, and because is in loop i can get all the urls, or at least console log all urls.

My problem is i want to put that that into an object so i can use it with an *ngFor directive, but i cant. I tried to create an empty object and assign imagesUrls to it, but with no sucess.

Can anyone help?

Thanks for your patient, i am just a newbie in javascript and educating my self on it.

By object do you mean you want to put the urls in an array by themselves? If not please show an example of what you expect to output — nanobar
– nanobar, Commented Jul 9, 2018 at 11:06
The first object in your array has a property image_urls and the others have a property image_url. I assume the s at the end of the first one is just a typo, but you may want to fix that ;) — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Jul 9, 2018 at 11:12

programtreasures · Accepted Answer · 2018-07-09 11:08:24Z

1

declare variable in component;

var images: any[];

ngOnInit(){

    var obj // Logic of get object 

    this.images = obj.images;
}

use images var in view

<div *ngFor="let img of images">
    {{img.image_url}}
</div>

answered Jul 9, 2018 at 11:08

programtreasures

4,2882 gold badges13 silver badges30 bronze badges

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

Comments

Akhil Aravind · Accepted Answer · 2018-07-09 11:10:24Z

1

in your component.ts, add

response = {};

this.response =  { 
id:12, 
cities:[london, lisbon, berlin],
images:[{id:1, image_urls:abc,},{id:2, image_url:bcd}, {id:3, image_url: cde}], 
status: "published"

}

in you component.html (if you are using li, or use any as your need )

<li *ngFor="let item of response.images">
     <img src="{{item.image_urls}}" />
</li>

answered Jul 9, 2018 at 11:10

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Comments

amrender singh · Accepted Answer · 2018-07-09 11:13:27Z

1

According to my understanding, you are mainly trying to make an array of image urls, You can simply use Array.map() for that :

var obj = { 
  id:12, 
  cities:["london", "lisbon", "berlin"],
  images:[{id:1, image_url:"abc"},{id:2, image_url:"bcd"}, {id:3, image_url: "cde"}], 
  status: "published"
};

var result = obj.images.map((a) => a.image_url);

console.log(result);

answered Jul 9, 2018 at 11:13

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Javascript loop object array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related