CODEWITHSUNDEEP
arraysjsonangulartypescript
Qivorch Velix
Qivorch Velix

Reputation: 7

I need to get a nested element in a json array

There is some list of elements in json format, it looks like this:

  [{
          'id': 0,
          "name": "Category name1",
          "services": [{
              "id": 0,
              "name": "Product name1"
          }, {
              "id": 1,
              "name": "Product name2"
          }]
      },
      {
          'id': 1,
          'name': "Category name2",
          "services": [{
              "id": 0,
              "name": "Product name1"
          }, {
              "id": 1,
              "name": "Product name2"
          }]
      }
  ]

I'm trying to get only the entire "services" array from the first category. Conditionally, I'm trying to get it as follows:

  this.class = this.http.get('/assets/products.json');
  this.class.forEach(element => {
              if (element.id == ID) //The ID is obtained when calling the function in which this code is executed
              {
                  console.log(element.services);
              }
          }

However, this gives me absolutely nothing and "undefined" is output to the console, however, with the same array and under the same conditions on the site https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach it (foreach and console.log) outputs everything I need.

//The same foreach only on the mozilla website
array1.forEach(item => {
  if(item.id==1){ //1 вместо ID
    console.log(item.services);
  }});

Output to the console: Array [Object { id: 0, name: "Product name1"}, Object { id: 1, name: "Product name2"}].
P.S. I don't really need this list of products in the console, I'm trying to pass a variable, but since undefined is passed to the variable, as well as to the console, I can't use the variable and call it to display products on the page. All this is used in the typescript angular project.

Upvotes: 0

Views: 267

Answers (1)

OctavianM
OctavianM

Reputation: 4597

The HttpClient methods like get return observables, to which you need to subscribe to in order for the request to even get executed. In your situation, the class property is only holding a reference to the observable returned by calling this.http.get. Try subscribing to the observable and use the result to extract the data that you need.

this.http.get<any[]>('/assets/products.json').subscribe((data) => {
  this.class = data;
  this.class.forEach((element) => {
    if (element.id == ID) {
      console.log(element.services);
    }
  });
});

Upvotes: 1

Related Questions