如何遍历在Typescript中包含两个对象的JSON响应？

Question

I am exporting an interface from a separate typescript file. While trying to iterate through the JSON response I am unable to parse it. I need to separate out one of the objects from the JSON response and store it in another array.

This is the interface:

export interface IComplaintTagUri {
    id: string
    tag_uri: string
}

This is the typescript file where I am importing the interface:

tagCategories: IComplaintTagUri[];
dropdown = [];

ngOnInit() {
    this.tagCategories = [];

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(this.tagCategories);
  })
this.tagCategories.forEach(element => {
    this.dropdown.push(element.tag_uri);
    console.log(this.dropdown);
  }); 
console.log(this.dropdown);
}

I am able to successfully store the result in tagCategories. But when I try to store the tag_uri in another array it does not work.

It seems as though the for loop is never accessed and the last log shows dropdown as an empty array.

Can anyone tell me where I'm going wrong?

I tried including the forEach inside the subscribe function as well:

tagCategories: IComplaintTagUri[]; dropdown = [];

ngOnInit() {
    this.tagCategories = [];

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(this.tagCategories);

this.tagCategories.forEach(element => {
  this.dropdown.push(element.tag_uri);
});
console.log(this.dropdown);

  })
}

Now the dropdown list prints to the console as a series of undefined objects.

Answer 1

Subscribe is an asynchronous function, the forEach line will execute before the subscribe block is complete, So, when forEach is running, tagCategories probably doesn't contain any values. Solution is to move forEach inside the subscribe.

Second mistake you have is this.dropdown.push(element.taguri) , it should be this.dropdown.push(element.tag_uri)

this.http.get<IComplaintTagUri[]>(tAPI.TagCategories).subscribe(result => {
    this.tagCategories = result;
    console.log("Result = ");
    console.log(result);
    console.log("Tag Categories = ");
    console.log(JSON.stringify(this.tagCategories));//make sure you have the result as you expect

    this.tagCategories.forEach(element => {
      this.dropdown.push(element.tag_uri);
      console.log(this.dropdown);
    }); 
  })
}