I need to get a nested element in a json array

Question

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.

Maybe the "ID" is undefined. Could you please check if the "ID" is passed correctly ? — vsnikhilvs
– vsnikhilvs, Commented Aug 16, 2021 at 1:51
Yeah, ID is undefined. But "if" is work and it outputs all classes and products if i send this.class.forEach(element=>{ if(element.id==ID){ console.log(element) //without .services } }) Which says that the ID is being read — Qivorch Velix
– Qivorch Velix, Commented Aug 16, 2021 at 3:58
this.rout.paramMap.subscribe(params=>{ console.log(this.classID = params.get('class.id')) } Returns index if there is a page id in the address bar, in my case it is 1, but passes it to the function described above in the undefined question — Qivorch Velix
– Qivorch Velix, Commented Aug 16, 2021 at 5:42

OctavianM · Accepted Answer · 2021-08-15 21:51:31Z

1

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);
    }
  });
});

answered Aug 15, 2021 at 21:51

OctavianM

4,6071 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qivorch Velix Over a year ago

I think this would work, but the ID is undefined and apparently therefore "if" does not work, however, if you put an integer (for example, 0 or 1), everything outputs as it should.

Qivorch Velix Over a year ago

My fault: I passed the ID value to ngOnInit, not to constructor. I fixed this mistake and everything works. Thank you and everyone who answered.

Collectives™ on Stack Overflow

I need to get a nested element in a json array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related