Store Json data from server to array in Angular 2

Question

I use nodejs server to get data from an SQL database.

I would store data in taches which is an array of Tache :

getTaches(): Observable<Tache[]> {
  return this.http.get(this.tachesUrl)
    .map(response => {
      this.taches = response.json().data as Tache[];

      console.log(this.taches);
    })
    .catch(this.handleError);

}

When I print on console this taches I get result as :

undefined

When I print response.json() I get my values :

Object {taches: Array(8)}

So I delete .data and try again, then I get another error on line 1 of the template file :

 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

here's my html file :

         <md-toolbar color="primary">
      <span>Taches non traitées</span>
    </md-toolbar>
        <md-card>


            <md-list   >
                      <ng-container *ngFor="let tache of this.tacheService.taches   "  >

                <md-list-item *ngIf="tache.stat == 0" (click)="onSelect(tache)" [class.selectionnee]="tache === tacheSelectionnee">{{tache.stat}}+{{tache.id}} + {{tache.name}}

                    <div *ngIf="tache === tacheSelectionnee">

                        <button md-icon-button  [mdMenuTriggerFor]="menu">
                            <md-icon>more_vert</md-icon>
                        </button>
                        <md-menu #menu="mdMenu">
                            <button md-menu-item (click)="openDialog(tache)">
                                <md-icon>edit</md-icon>
                                <span>Modifier</span>
                            </button>
                            <button md-menu-item (click)="delete(tache)">
                                <md-icon>delete</md-icon>
                                <span>Supprimer</span>
                            </button>
                            <button md-menu-item (click)="save(tache)">
                                <md-icon>cached</md-icon>
                                <span>Traiter</span>
                            </button>
                        </md-menu>


                    </div>

                </md-list-item>

                </ng-container>

            </md-list>
        </md-card>

I would store data in taches array correctly so that I could show them as todo list.

Yonatan Lilling · Accepted Answer · 2017-06-13 20:01:28Z

1

try this:

getTaches(): Observable<Tache[]> { 
    return this.http.get(this.tachesUrl)
      .map(response => {
         this.taches = response.json().taches as Tache[];

  console.log(this.taches);
})
  .catch(this.handleError);
}

your object received from the api holds the taches array

answered Jun 13, 2017 at 20:01

Yonatan Lilling

2981 gold badge4 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Store Json data from server to array in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related