how to display json array in angular 2 typescript front end by *ngFor

Question

Below is angular2 simple front end page::

       <table class="table">
          <tr>
              <th>title</th>
              <th>description</th>
          </tr>
          <tr *ngFor="let notes of Note">
              <td>{{notes.title}}</td>
              <td>{{notes.body}}</td>
          </tr>
      </table>

Below is component code:: in which Note is having

export class Note {
  noteId:  number ; 
  title:  String ;
  body: String ;    
  color:  String ;
  isArchive:  boolean ; 
  isPinned:  boolean ; 
  isTrash: boolean ;
}



notes:Note[]=[];

ngOnInit() {
  this.getAllNotes();
}
//get all anotes
getAllNotes(){
this.noteService.getNotes()
.subscribe(
 // notes => {   //tried not working
 //   this.notes = notes;
 // console.log(notes) },
data => {
  console.log("notes get");
  console.log(data._body);
  this.notes=data._body;
  console.log("notes array");
  console.log(this.notes);
},
error => {
  console.log("notes error");
    console.log(error);

});
}

in above this.notes output is ::

[
  {
    "noteId": 5,
    "title": "hi ",
    "body": "ragini",
    "color": null,
    "createDate": 1515820245951,
    "lastUpdated": 1515820245951,
    "reminder": null,
    "image": null,
    "collaborator": [],
    "labels": [],
    "user": 1,
    "archive": false,
    "pinned": false,
    "trash": false
  },
  {
    "noteId": 8,
    "title": "s",
    "body": null,
    "color": null,
    "createDate": 1515820746348,
    "lastUpdated": 1515820746348,
    "reminder": null,
    "image": null,
    "collaborator": [],
    "labels": [],
    "user": 1,
    "archive": false,
    "pinned": false,
    "trash": false
  }
]

now how to display this data in angular2 front end.

Sajeetharan · Accepted Answer · 2018-01-13 06:19:00Z

2

You need to use notes instead of Note

<tr *ngFor="let note of notes">
    <td>{{note?.title}}</td>
    <td>{{note?.body}}</td>
</tr>

DEMO

edited Jan 13, 2018 at 6:19

answered Jan 13, 2018 at 6:12

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

Ragini Patil Over a year ago

Dint work gave error:ERROR Error: Error trying to diff '[{"noteId":,. array.}]' Only arrays and iterables are allowed at DefaultIterableDiffer.diff (core.js:7342) at NgForOf.ngDoCheck (common.js:2550) at checkAndUpdateDirectiveInline (core.js:12098) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (HomeComponent.html:24) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) at checkAndUpdateView (core.js:13508)

Ragini Patil Over a year ago

do we need to add import any thing

Sajeetharan Over a year ago

did the answer help?

Ragini Patil Over a year ago

sorry but no ;it dint help,i posted the answer and it is running actually data i am getting from backend..

Sajeetharan Over a year ago

you anyway had the problem with ngFor, also you should always return the data from the api in json format, parsing to object is not the right way

Sanoj_V · Accepted Answer · 2018-08-27 13:22:05Z

1

Html code::

<tr *ngFor="let notes of notes; let i = index">
    <td>{{notes.title}}</td>
    <td>{{notes.body}}</td>
</tr>

i just did this.notes=JSON.parse(data._body); and worked remaining code is as above.

data => {
    console.log(data._body);
    this.notes=JSON.parse(data._body); // parsing here
    console.log("notes array"+this.title);
    console.log("Title :: "+this.notes.title);
},

edited Aug 27, 2018 at 13:22

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

answered Jan 13, 2018 at 6:55

Ragini Patil

1191 silver badge14 bronze badges

Collectives™ on Stack Overflow

how to display json array in angular 2 typescript front end by *ngFor

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related