How can I display my json object with TypeScript in Angular?

Question

I am trying to display my json array in html using *ngFor but I believe it's not working because it needs to be inside the class AppComponent. But if I try to move the source code to make the json object inside the AppComponent class I get an error.

This is my app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  s = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.s[0];

}

interface Person {
  name: string;
  year: number; 
}

var people: Person[] = [{ name: 'robert', year: 1993 }];
var newPerson: Person = { name: 'joe', year: 1992 };

people.push(newPerson);

newPerson = {name: 'jose', year: 1997};

people.push(newPerson);


console.log(people[2].name);

This is my app.component.html file

<p>HEllo</p>


<ul>
  <li *ngFor="let name of s">
    {{ name }}
  </li>
</ul>

I want to do something to what I did in the html file but with the other array

Can you show us how you do it with the other array on your html? And what's the error you encountered. — penleychan
– penleychan, Commented Jul 3, 2019 at 17:02

caden311 · Accepted Answer · 2019-07-03 17:04:49Z

3

You just need to treat the app component like a class. This shouldn't throw any errors.

import { Component } from '@angular/core';
interface Person {
  name: string;
  year: number;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public s = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  public myHero = this.s[0];
  public people : Person[];
  public newPerson: Person;

  constructor() {
    this.people = [{ name: 'robert', year: 1993 }];
    this.newPerson = { name: 'joe', year: 1992 };

    this.people.push(newPerson);

    this.newPerson = {name: 'jose', year: 1997};

    this.people.push(newPerson);


    console.log(this.people[2].name);
  }

}

answered Jul 3, 2019 at 17:04

caden311

98110 silver badges23 bronze badges

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

2 Comments

Nicholas K Over a year ago

The constructor isn't the best place to initialize data; use the ngOnInit life-cycle hook provided by angular.

caden311 Over a year ago

Yeah it should probably be broken out into meaningful functions. My answer is just to show him how to get it working without errors.

Nicholas K · Accepted Answer · 2019-07-03 17:50:13Z

You need to place the statements within a method/constructor of a class which you are not doing, hence the compile time error. The ngOnInit() is the ideal place for your component to initialize its data.

Your component should look something like this:

export class AppComponent implements OnInit {
  people: Person[] = [];

  ngOnInit() {
    this.people  = [{ name: 'robert', year: 1993 }];
    let newPerson: Person = { name: 'joe', year: 1992 };
    this.people.push(newPerson);
    newPerson = {name: 'jose', year: 1997};
    this.people.push(newPerson);
    console.log(this.people[2].name);
  }
}

interface Person {
  name: string;
  year: number; 
}

And the template

<ul>
  <li *ngFor="let p of people">
    {{ p.name }}, {{ p.year }}
  </li>
</ul>

Here's a stackblitz for the same.

Collectives™ on Stack Overflow

How can I display my json object with TypeScript in Angular?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related