Bind API Data in Angular?

Question

I am trying to bind Data which is coming from API, Data is showing in the network but When I am trying to bind data it is giving me an error -

Cannot find a differ supporting object
function'. NgFor only supports binding to Iterables such as Arrays.

API Data in Network

 [{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]",…},…]
     
//While expanding the response

{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]"}

.TS

  public MyDigestEmailIdPrint = [];
  DigestEmailIdPrint() {
    var postData = {
    clientid: localStorage.getItem("storageselectedclient"),
  };

    this.article.DigestEmailIdPrint(postData).subscribe(
    (res) => { 
    if (res.message != "No Record Found") {
       this.MyDigestEmailIdPrint.push(res);
    }
  },
  (err) => {
    console.log(err);
  }
);

}

.HTML

<tbody>
  <tr *ngFor="let details of MyDigestEmailIdPrint">
    <td> {{details.ContactName}}</td>
    <td> {{details.Email}}</td>
    <td> {{details.frequency}}</td>
    <td><input type="checkbox"></td>
  </tr>

</tbody>

The problem is that you use ngFor for an object which, as the error states, is not an iterable. Your backend is not giving you an array, but an object. — OctavianM
– OctavianM, Commented Jun 9, 2022 at 7:06

Zerotwelve · Accepted Answer · 2022-06-09 08:40:23Z

1

DigestEmailIdPrint is a function and doesn't return anything. Maybe you should use MyDigestEmailIdPrint in the ngFor but as pointed out in the comment, the data you get from the backend is not an array.

you can fix it like this:

if (res.message != "No Record Found") {
    // use the spread syntax to create a new array and trigger change detection
    this.MyDigestEmailIdPrint = [...res.result];
}

edited Jun 9, 2022 at 8:40

answered Jun 9, 2022 at 7:08

Zerotwelve

2,3731 gold badge13 silver badges27 bronze badges

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

8 Comments

kate moss Over a year ago

error is gone but getting blank data, nothing is showing now on HTML page but data is in Network showing.

Zerotwelve Over a year ago

are you pushing the right data in the array? what is res? also please stick to code conventions variables and functions shoudl be in camelCase starting with a lovercase

Apoorva Chikara Over a year ago

Pushing the res to MyDigestEmailIdPrint will create

[[{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]"}, {deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]"}]]

something like this. That is not correct to data get in the view.

kate moss Over a year ago

res is a response getting from API which is now {code: 200, result: Array(5)} and if we expand this the data will be shown

[{deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]"}, {deliveryid: 0, frequency: "", ContactName: "Aa", Email: "[email protected]"}]

Zerotwelve Over a year ago

well in that case you should do : ` this.MyDigestEmailIdPrint = [...res.result];`

|

Apoorva Chikara · Accepted Answer · 2022-06-09 07:29:12Z

0

I would suggest you to check the res type. It seems it must be an object and thats what the error is pointing to NgFor only supports binding to Iterables such as Arrays.

The error is not only linked to this, the question is when are you calling the API and does the view load till that time?

Solution 1: If your response in the component is of different type, you can covert it to array.

Solution 2: Check when the data is getting loaded into the view. You should know the lifecycle hooks to get the data at correct time to get things in component.

Solution 3:


if (res.message != "No Record Found") {
    // node need to push data to MyDigestEmailIdPrint
    // this.MyDigestEmailIdPrint.push(res); // add the data in the array
    this.MyDigestEmailIdPrint = res; // if res is an array it is fine to assign
}

answered Jun 9, 2022 at 7:29

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

5 Comments

kate moss Over a year ago

Yes I am getting error while assign to this.MyDigestEmailPrint = res; is Only arrays and iterables are allowed Also noted that the data is res is like this (5) [{…}, {…}, {…}, {…}, {…}]

Apoorva Chikara Over a year ago

Have you checked the type of res?

kate moss Over a year ago

thank you All I did is this.MyDigestEmailIdPrint = [...res.result];

Apoorva Chikara Over a year ago

Yes, thats what solutions1 refers to. The res is of type object and you were getting results in result - this is because of the http response.

Apoorva Chikara Over a year ago

You don't even use spread operator to get the values, you can directly assign values: just a tip.

Collectives™ on Stack Overflow

Bind API Data in Angular?

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related