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.

Answer 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>

Answer 2

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>

Answer 3

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);