CODEWITHSUNDEEP
angulartypescript
user7993717
user7993717

Reputation:

Print an array element in JSON object in Angular

I have created an Angular component to print some JSON object data.

Component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

  name = 'Angular';

  obj = {
    id:1,
    title:"student",
    name:"ABC",
    subjects: [
      { sub_id: 1, sub_name: 'Maths'},
      { sub_id: 2, sub: 'physics' },
      { sub_id: 3, sub: 'chemistry'}
    ]
  };

  constructor(){ }      
}

I need to print all the subject names in HTML. So I did this

component.html

<p *ngFor="let item of obj['subjects']">{{ item.sub_name }}</p>

But after I open the page, Console gives an Error! I think the error is in the for loop, but I can't figure it out. What I've missed here?

Upvotes: 0

Views: 53

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68635

Your property name is obj, but you have used array.

<p *ngFor="let item of obj.subjects">{{ item.sub_name }}</p>

Upvotes: 2

Related Questions