0
157
ViewsUnable to fetch data items from array in Angular CLI
I working on angular and new at coding the issue I am facing is that I am fetching data from a 3rd party WebAPI and the output I am trying to save in array but the output is getting stored but I am not able to call particular data of array.
here is my code below need all of your kind support
MY CODE
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';
@Component({
selector: 'app-taglist',
templateUrl: './taglist.component.html',
styleUrls: ['./taglist.component.css']
})
export class TAGLISTComponent implements OnInit {
constructor(private service : SharedService) { }
Taglist:any=[];
TagStore:any=[];
FinalData:any=[];
ngOnInit(): void {
this.refreshTagslist();
}
refreshTagslist(){
this.service.gettaglist().subscribe(data=>{
this.Taglist = data;
//console.log(this.Taglist);
for(var i = 0; i < this.Taglist.Items.length;i++)
{
this.service.PITagValue= this.Taglist.Items[i].Links.Value;
this.service.gettagValue().subscribe(data=>{
this.TagStore = data;/* THE JSON RESPONE MENTION*/
this.FinalData.push(this.TagStore.Value);
})
}
console.log(this.FinalData)
console.log(this.FinalData[1]);
//console.log(this.Taglist.Items[0].Name);
})
}
}
JSON RESPONE
{
"Timestamp": "2022-01-12T12:15:37Z",
"Value": 1.0,
"UnitsAbbreviation": "",
"Good": true,
"Questionable": false,
"Substituted": false,
"Annotated": false
}
the output I am getting
1 answers
Answer question0
If this.service.gettagValue() returns an async observable, then the console.log statements logging this.FinalData and this.FinalData[1] would be executed before the execution of below lines.
this.TagStore = data;/* THE JSON RESPONE MENTION*/
this.FinalData.push(this.TagStore.Value);
The below log statements would be executed before the data is pushed into this.FinalData
console.log(this.FinalData); // here this.FinalData would be []
console.log(this.FinalData[1]); // Trying to access 1st element from empty array will result in undefined
You are able to view data within Chrome console, because the value gets evaluated upon 1st expanding. Try below console statement, and you would be see an empty array printed:
console.log(JSON.stringify(this.FinalData)); // instead of console.log(this.FinalData)
I would also recommend you to explore forkJoin RxJS operator and see if that would be useful for your use case. The operator basically waits for all the Observables to complete and then combine the result.