angular - How to loop through an object and push into an array -


what i'm working with

  • angular2
  • firebase

what have

  • a returned object
  • each item in object has url property

what do

  • loop through each of items in object , url property
  • pass firebase storage variable
  • push url property array make available html

note: have working hard coding url, need assistance looping through object other urls in object.

component.ts

'this.imagestodisplay' return object of object (image below)

this.activatedroute.data    .subscribe((      data: { issuedata: any, issueimagedata: }) => {      this.issuetodisplay = data.issuedata;      this.imagestodisplay = data.issueimagedata;         this.testing(this.imagetodisplayarray);       });
enter image description here

comnponent ts - testing method

so hardcoded , pushes hardcoded url array , displays correctly through databinding html. cool. however, loop through 'imagestodisplay' object , both returned urls.

  testing(imagetodisplayarray) {            // works 1 url      var storage = firebase.storage().ref().child("image/-kosd82p-bmh4sfetuf3/-kosd8hhgmfiuhymrlvw/30dd9f39-4684-4aa0-9dbf-3b0f0c3450a4.jpg");      storage.getdownloadurl().then(function(url) {      imagetodisplayarray.push(url);          console.log(imagetodisplayarray);      });      }

any here massively appreciated.

note: think question here i'm trying do, i'm not sure how integrate current code. awesome. stack overflow question on firebase storage looping

update

so, i'm incredibly close now. have 1 issue. code below loops through returned data , extract url properties. use url properties connect firebase storage , return download urls. both of these logged console! awesome. have urls needed! issue i'm having is, let me push these values local array. in instance 'var array'. need push array that's outside of 'activatedroute' 'method'. anytime do, returns undefined.

this.activatedroute.data        .subscribe((          data: { issuedata: any, issueimagedata: }) => {          this.issuetodisplay = data.issuedata;          this.imagestodisplay = data.issueimagedata;            var array = [];            data.issueimagedata.foreach(image => {              // reference image url            var image = image.url;              // firebase storage            var storage = firebase.storage();              // path reference            var imagepathreference = storage.ref().child(image);              // download url            imagepathreference.getdownloadurl().then(function (url) {              console.log(url);              array.push(url);            })          });            });

i recommend use features rxjs provides you:

this.activatedroute.data.switchmap(data => {     let parseddata = {          issuetodisplay: data.issuedata,         imagestodisplay: data.issueimagedata     }     let imageurls$ = data.issueimagedata.map(image => {         var imagepathreference = storage.ref().child(image);         return observable.frompromise(imagepathreference.getdownloadurl())     });     return observable.forkjoin(imageurls$).map((...urls) => {         return object.assign(parseddata, { urls });     }) }).subscribe(data => {     /*      data looks this:     {         issuetodisplay: any,         imagestodisplay: any,         urls: string[]     }     */ }); 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -