Unable to loop through using ngFor

Question

Unable to loop through using ngFor

I have a component that retrieves data from the back-end and groups it accordingly.

Below is the code snippet:

 getRecruitmentAgencyClientPositions(): void {
    this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAgencyClientId).subscribe(r => {
        this.groupedArray = _.groupBy(r.items, 'groupIdentifier');
        console.log(this.groupedArray);
    });
}

This is an example of how I formatted the data:

 {
  "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf": [
    {
      "groupIdentifier": "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf",
      "salary": 100,
      "commission": 5,
      "recruitmentAgencyClientId": 10,
      "isDeleted": false,
      "deleterUserId": null,
      "lastModifierUserId": null,
      "creationTime": "2020-11-27T18:00:48+02:00",
      "creatorUserId": 3,
      "id": 5
    }
  ],
  "00000000-0000-0000-0000-000000000000": [
    {...}, 
    ...
  ]
}

I'm attempting to generate tables based on the grouping like this:

<div *ngFor="let item of groupedArray">
<div class="primeng-datatable-container positions-table" [busyIf]="primengTableHelper.isLoading">
    <p-table ... >
       ... table structure ...
    </p-table>
    <div class="primeng-no-data" *ngIf="!primengTableHelper.records">
        {{ 'NoData' | localize }}
    </div>
</div>
</div>

However, I'm encountering an error message:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

How can I resolve this issue?

javascript angular typescript

Answer 1

Answer №1

It seems that the error message is indicating that ngFor can only iterate over arrays and not objects. To convert an object into an array, you can make use of methods like Object.values() or Object.keys(). In your scenario, since the keys match the property groupIdentifier, using Object.values() would be recommended.

An example to incorporate Object.values() within ngFor could look like this:

*ngFor="let item of Object.values(groupedArray)"

Keep in mind that this will result in iteration over:

[
  [
    {
      "groupIdentifier": "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf",
      "salary": 100,
      ...
    }
  ],
  [
    {
      "groupIdentifier": "00000000-0000-0000-0000-000000000000",
      "salary": 100,
      ...
    },
    ...
  ]
]

This implies that a second level of ngFor will be necessary.

The ideal solution to address this issue would involve correctly mapping values when retrieving them from the backend. For instance:

getRecruitmentAgencyClientPositions(): void { 
    this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAgencyClientId).subscribe(r => {
        const groupedObject = _.groupBy(r.items, 'groupIdentifier'); // object of arrays
        const groupedArrays = Object.values(groupedObject); // array of arrays
        this.groupedArray = groupedArrays.reduce((flatArray, current) => flatArray.concat(current), []); // flattening arrays for final result
        console.log(this.groupedArray);
    });
}

By doing this, using

*ngFor="let item of groupedArray"

should function smoothly.

UPDATE If you want to iterate per group without flattening the arrays, you can implement it like this:

getRecruitmentAgencyClientPositions(): void { 
    this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAgencyClientId).subscribe(r => {
        const groupedObject = _.groupBy(r.items, 'groupIdentifier'); // object of arrays
        this.groupedArray = Object.values(groupedObject); // array of arrays
        console.log(this.groupedArray);
    });
}

In this setup, groupedArray remains as an array where each element represents one group.

Answer 2

It seems that the error message is indicating that ngFor can only iterate over arrays and not objects. To convert an object into an array, you can make use of methods like Object.values() or Object.keys(). In your scenario, since the keys match the property groupIdentifier, using Object.values() would be recommended.

An example to incorporate Object.values() within ngFor could look like this:

*ngFor="let item of Object.values(groupedArray)"

Keep in mind that this will result in iteration over:

[
  [
    {
      "groupIdentifier": "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf",
      "salary": 100,
      ...
    }
  ],
  [
    {
      "groupIdentifier": "00000000-0000-0000-0000-000000000000",
      "salary": 100,
      ...
    },
    ...
  ]
]

This implies that a second level of ngFor will be necessary.

The ideal solution to address this issue would involve correctly mapping values when retrieving them from the backend. For instance:

getRecruitmentAgencyClientPositions(): void { 
    this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAgencyClientId).subscribe(r => {
        const groupedObject = _.groupBy(r.items, 'groupIdentifier'); // object of arrays
        const groupedArrays = Object.values(groupedObject); // array of arrays
        this.groupedArray = groupedArrays.reduce((flatArray, current) => flatArray.concat(current), []); // flattening arrays for final result
        console.log(this.groupedArray);
    });
}

By doing this, using

*ngFor="let item of groupedArray"

should function smoothly.

UPDATE If you want to iterate per group without flattening the arrays, you can implement it like this:

getRecruitmentAgencyClientPositions(): void { 
    this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAgencyClientId).subscribe(r => {
        const groupedObject = _.groupBy(r.items, 'groupIdentifier'); // object of arrays
        this.groupedArray = Object.values(groupedObject); // array of arrays
        console.log(this.groupedArray);
    });
}

In this setup, groupedArray remains as an array where each element represents one group.

Answer 3

Answer №2

It appears that the data in groupedArray is not structured as an array, but rather as an object containing two arrays within it.

To clarify: the first array is: "00000000-0000-0000-0000-000000000000" the second array is: "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf".

If you wish to convert this into a single array for iteration, you can combine the contents of both arrays into one array.

Here's how:

function mergeArrays(array){
    let mergedArray = [];
    array["00000000-0000-0000-0000-000000000000"].forEach(data => {
        mergedArray.push(data);
    });

    array["57a5bcdf-fdf0-494a-ba94-8c50ebb716cf"].forEach(data => {
         mergedArray.push(data)
    });
   return mergedArray;
}

Answer 4

It appears that the data in groupedArray is not structured as an array, but rather as an object containing two arrays within it.

To clarify: the first array is: "00000000-0000-0000-0000-000000000000" the second array is: "57a5bcdf-fdf0-494a-ba94-8c50ebb716cf".

If you wish to convert this into a single array for iteration, you can combine the contents of both arrays into one array.

Here's how:

function mergeArrays(array){
    let mergedArray = [];
    array["00000000-0000-0000-0000-000000000000"].forEach(data => {
        mergedArray.push(data);
    });

    array["57a5bcdf-fdf0-494a-ba94-8c50ebb716cf"].forEach(data => {
         mergedArray.push(data)
    });
   return mergedArray;
}

Unable to loop through using ngFor

Answer №1

Answer №2

Similar questions

There appears to be an issue with Mongoose Unique not functioning properly, as it is allowing

Error: npm encountered a loop error while attempting to download

What factors determine when Angular automatically triggers a setTimeout function compared to another?

Having trouble getting webpack and babel to start using npm

Update the HighChart Pie chart depending on the selection in the dropdown menu

The issue of circular dependencies in TypeScript arises specifically within the Record type rather than in an ordinary object type

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

Locating the Active Object's Coordinates in fabric.js

React's setState function failed to update the specified value within the set

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

Unable to retrieve object property-Attempting to access properties of undefined object

Testing the ControllerAs syntax when dealing with forms in AngularJS

Eliminate lower values in select 1 if the value selected in select 2 is higher

Insert text into the cursor location within Summernote using JQuery

When utilizing Jest, the issue arises that `uuid` is not recognized as

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

What is the best way to determine the height of a DIV element set to "auto"?

Ways to verify if the flash plugin has been disabled in the Chrome browser

I am encountering an issue where I am unable to successfully fetch a cookie from the Express backend to the React

Exploring the depths of nested object arrays