Display nested JSON file in Angular

Question

I can't wrap my head around how I should loop through a nested JSON file I've got.

This is the code I've got si far:

JSON:

[
    {  
    "produkt": "dammsugare",
    "produktinformation": [
        {
        "artikelnr": 9121283726,
        "typ": "ean"
        },
        {
        "artikelnr": "dasu",
        "typ": "varukod"
        }
    ]
    },
    {
    "produkt": "hammare",
    "produktinformation": [
        {
        "artikelnr": 91246128736,
        "typ": "ean"
        },
        {
        "artikelnr": "traffaspik",
        "typ": "varukod"
        }
    ]
    }
]

Service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {

  constructor(private http:HttpClient) { }

  getProducts() {
    console.log('getProducts()');
    return this.http.get('/assets/produkter.json');
  }

  getInfo() {
    console.log('getInfo()');
    return this.http.get('/assets/produkter.json')
  }
}

Component.ts:

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from '../myservice.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  arrProducts: any;

  constructor(private myserviceService: MyserviceService) { }

  ngOnInit() {
    this.myserviceService.getProducts().subscribe((data) => {
      console.log(data);
      this.arrProducts = data;
    });
  }
}

Component.html:

<p>list works!</p>
<ul *ngFor="let product of arrProducts">
    <li>{{ product.produkt }}</li>
    <li>{{ product.productinformation.artikelnr }}</li> <!-- THIS LINE IS WRONG, BUT I DON'T KNOW WHAT TO DO-->
</ul>

As you can see, I do not know how to edit the component.html for it to display the nested JSON file.

I hope there's someone who could help me out. Thanks! :)

Does this answer your question? How can I access and process nested objects, arrays or JSON? — ytan11
– ytan11, Commented Dec 16, 2021 at 14:29

bryan60 · Accepted Answer · 2021-12-16 14:32:30Z

1

you just nest ngFor...

<p>list works!</p>
<ul *ngFor="let product of arrProducts">
    <li>{{ product.produkt }}</li>
    <li *ngFor="let info of product.produktinformation">{{ info.artikelnr }}</li>
</ul>

answered Dec 16, 2021 at 14:32

bryan60

29.4k5 gold badges56 silver badges71 bronze badges

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

Comments

sdm4n · Accepted Answer · 2021-12-16 14:29:27Z

0

Your JSON structure says productinformation.artikelnr, but you want to access produktinformation.artikelnr, i. e. you misspelled a c and wrote k instead.

answered Dec 16, 2021 at 14:29

sdm4n

1439 bronze badges

Collectives™ on Stack Overflow

Display nested JSON file in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related