Parsing JSON response in Angular2

Question

Id  FirstName LastName  Action
1.  Foo       Bar       Edit
2.  Happy     Kid       Edit

The json which I get from my backend is [{"id":1,"firstName":"Foo","lastName":"Bar"},{"id":2,"firstName":"Happy","lastName":"Kid"}].

Below is my HTML file -

<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

    <tr *ngIf="userList" >
      <td *ngFor="let user of userList">{{user.firstName}}</td>

      <td>
        <button>Edit</button>
      </td>
    </tr>
    </tbody>
</table>

The "userList" holds my json response.

Problem :- I get the error "Error trying to diff '[{"id":1,"firstName":"Foo","lastName":"Bar"},{"id":2,"firstName":"Happy","lastName":"Kid"}]'. Only arrays and iterables are allowed".

How do I parse my json into my required ui ?

Rudraksh Pathak · Accepted Answer · 2017-06-08 04:50:43Z

ngFor expects array or object on which it can iterate the result, but as per your problem neither of them is present.

Try using this code -

For GET Request -

return this.http.get(API_URL)
        .map(res => res.json()
        .subscribe(
            data => this.YOUR_VARIABLE = JSON.stringify(data),
            error => alert(error),
            () => TO_DO_AFTER_REQUEST_COMPLETION
         ));

For POST Request -

return this.http.post(API_URL,POST_PARAMETERS,{
            headers:HEADERS
        })
        .map(res => res.json()
        .subscribe(
            data => this.YOUR_VARIABLE = JSON.stringify(data),
            error => alert(error),
            () => TO_DO_AFTER_REQUEST_COMPLETION
         ));

This will return Json response for iteration.

NOTE -

This is a pseudo code, make amendments as per your requirement.

Praneeth Reddy · Accepted Answer · 2017-06-08 00:33:23Z

0

You JSON is invalid. try to keep

[{id:1,firstName:"Foo",lastName:"Bar"},{id:2,firstName:"Happy",lastName:"Kid"}]

If you want to keep keys as a string you need to write pipe to convert.

answered Jun 8, 2017 at 0:33

Praneeth Reddy

4243 silver badges7 bronze badges

1 Comment

user663031 Over a year ago

What is invalid about the JSON?

Bharat Gupta · Accepted Answer · 2017-06-08 04:10:17Z

0

The json that you get in this case is just a string and not a javascript array. ngFor expects an array to iterate over but the supplied parameter is a string. You need to convert the string to javascript object by using the json() method on the response.

Example code:

return this.http.get("some-api-url")
                .toPromise()
                .then(response => response.json().data); // check this line

If you are using observables directly and not converting toPromise, even then you need to call json() method on the response. You can even use the native JSON.parse method to convert the string response to javascript object.

answered Jun 8, 2017 at 4:10

Bharat Gupta

2,6941 gold badge22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Parsing JSON response in Angular2

3 Answers 3

For GET Request -

For POST Request -

NOTE -

Comments

1 Comment

Comments

Your Answer

Collectives™ on Stack Overflow

Parsing JSON response in Angular2

3 Answers 3

For GET Request -

For POST Request -

NOTE -

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest