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); });
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
Post a Comment