Unable to fetch data items from array in Angular CLI

Question

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

Can you mark what console.log is displaying from line 36 and 37 from your image? Also, `console.log(this.FinalData)` and `console.log(this.FinalData[1]);` are outside subscription that get those data, so they certainly might log undefined since it's an async sub. — Misha Mashina, Jan 20 '22 at 05:45
the image is showing the respone of the following console.log(this.FinalData) line 36 and Console.log(this.FinalData[1]) line 37 — Vandan Kotecha, Jan 20 '22 at 07:03
can you display the this.TagStore value in log along with those 2 logs? — Misha Mashina, Jan 20 '22 at 07:30

score 0 · Answer 1 · answered Jan 20 '22 at 14:26

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.

thankyou siddhant for your kind support i got your point and i very new at angular so if possible could you please show me how to use forkJoin function in my following code or instead of using async how to use sync get request — Vandan Kotecha, Jan 21 '22 at 04:25
@VandanKotecha See is this helps: https://stackoverflow.com/questions/50721283/waiting-observable-subscribe-inside-foreach-to-end . Also its not a good practice to use subscribe within subscribe. Maybe you can go through https://stackoverflow.com/questions/52317494/is-it-good-way-to-call-subscribe-inside-subscribe — Siddhant, Jan 21 '22 at 04:43

Unable to fetch data items from array in Angular CLI

1 Answers1