Angular 2 TypeScript JSON Show in view

Question

I have problem with this Angular 2 TS JSONs. I was programing AngularJS in the past but now i am trying Angular 2 and TS . I can't understend how the Json response working here when i am trying to show them on view. I know that this type of show one value in selector opiton is wrong dont worry about it.

<tr *ngFor="let task of tasks;let myIndex = index">
        <th> {{myIndex+1}}</th>
        <td>{{task.title}}</td>
        <td>{{task.CreateDate}}</td>
        <td>{{task.CurentMoney}}</td>
        <td>
            <select class="form-control"  id="sel1">
                <option>{{ task.History.month}}</option>
            </select>
        </td>
        <td>

Somthing like Task maping class .

export class Task{
_id:string;
title: string;
CreateDate: string;
CurentMoney: number;
isDone: boolean;
History: { month: string, monthMoney:number}[];}

Controler:

import { Component } from '@angular/core';
import {TaskService} from '../../services/task.service';
import {Task} from '../../../Task';

@Component({
  moduleId: module.id,
  selector: 'tasks',
  templateUrl: 'tasks.component.html'
})

export class TasksComponent {
    bankName: string;
    tasks: Task[];
    title: string;
    CreateDate: string;
    CurentMoney: number;


    constructor(private taskService:TaskService){
        this.taskService.getTasks()
            .subscribe(tasks => {
                this.tasks = tasks;
            });
    } 
testObj(){

    console.log(this.tasks);
}...}

Servivce:

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import {Task} from "../../Task";

@Injectable()
export class TaskService{
    constructor(private http:Http){
        console.log('Task Service Initialized...');
    }

    getTasks(){
        return this.http.get('/api/tasks')
            .map(res => <Task[]>res.json());
    }

When I call testobj() i have right console output json, but on the view i can't do task.History.month for example.

{ "_id" : ObjectId("58efb109420c1f2340bbb31a"), "title" : "bank", "CreateDate" : "2017-04-13", "CurentMoney" : "123", "isDone" : false, "History" : [ { "month" : "December", "monthMoney" : "200000" }, { "month" : "jaunary", "monthMoney" : "300000" } ] } — Mistu
– Mistu, Commented Apr 16, 2017 at 21:09

Aravind · Accepted Answer · 2017-04-16 21:45:43Z

1

You should be using custom defined types as

export interface Task{
    _id:string;
    title: string;
    createDate: string;
    curentMoney: number;
    isDone: boolean;
    history: Array<History>;
}
export interface History 
{ 
    month: string, 
    monthMoney:number

}

Update : As you are nesting an array inside, you need to use another ngFor to loop into it as below

<div *ngFor="let task of tasks"> 
        <p *ngFor="let item of task.History">Test: {{item.month}}</p> 
</div>

edited Apr 16, 2017 at 21:45

answered Apr 16, 2017 at 21:09

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

7 Comments

Mistu Over a year ago

When i am try this i have : HTML TEST: <div *ngFor="let task of tasks"> <p>Test: {{task.History | json}}</p> </div> View: Test: [ { "month": "jau", "monthMoney": "200000" }, { "month": "December", "monthMoney": "300000" } ] and i got : When i am change it for <div *ngFor="let task of tasks"> <p>Test: {{task.History.month}}</p> </div> core.umd.js:3427 EXCEPTION: Error in localhost:3000/app/components/tasks/tasks.component.html:17:15 caused by: Cannot read property 'month' of undefined

Aravind Over a year ago

are you getting the data from the service?

Mistu Over a year ago

Cannot read property 'month' of undefined i cant go into array everything is showing good only things in array are like not "included".

Mistu Over a year ago

Yes , u got it in the post.

Aravind Over a year ago

did you check if you have made any typo?

|

Collectives™ on Stack Overflow

Angular 2 TypeScript JSON Show in view

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related