The Angular NgFor directive can only be used to bind data to Iterables like Arrays

I am encountering an issue when attempting to iterate through and display data using ngFor.

The specific error appearing in the console is "Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

Below is the code snippet causing the error:

//TS Component

var lssessionsObject = JSON.parse(localStorage.getItem('sessionsObject'));

//localstorage array

lssessionObject = {"total_rows":1,"offset":0,"rows":[{"id":"245fd1cbf38f79256a7443a0b5001461","key":"245fd1cbf38f79256a7443a0b5001461","value":{"cinemaid":"0001","session":"168970","filmid":"HO00003858","screen":"VIP 1","datetime":"2017-07-22T11:00:00","attributes":["3D Film","Scene VIP"]}}]}

HTML

<ion-slides class="image-slider" slidesPerView="3" pager="true">
        <ion-slide *ngFor="let item of sessionsObject" class="border">
        <button ion-item color="primary" id={{item.filmid}} class="bottom-slider">
            {{item.filmid}}
        </button>

    </ion-slide>
</ion-slides>

Your help in resolving this issue is greatly appreciated.

Answer №1

ngFor operates on iterables. An iterable object is an object that has the [Symbol.iterator] method implemented which returns an iterator. You can find more information about it here. By default, only Array and Map are iterable in JavaScript.

In JavaScript, objects are not iterable. Your sessionsObject is a simple object and does not have the [Symbol.iterator] method implemented. However, you can easily implement it yourself:

// 
lssessionsObject[Symbol.iterator] = function* () {
   for (p in this) yield this[p];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the Angular Slice Pipe to Show Line Breaks or Any Custom Delimiter

Is there a way in Angular Slice Pipe to display a new line or any other delimited separator instead of commas when separating an array like 'Michelle', 'Joe', 'Alex'? Can you choose the separator such as NewLine, / , ; etc? ...

Struggling with TypeScript Errors while Extending Theme Colors in Material UI React using TypeScript

Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ ...

A convenient utility for generating React components with pre-populated Tailwind CSS classes

When it comes to extracting local Tailwind-styled components, I tend to do it like this: const Container: React.FC = ({ children }) => ( <div className="bg-white px-5 py-5"> {children} </div> ); To simplify this process, I ...

Encountering an Issue: "ng new" Command Throws Error Upon Creating Angular Project

I am encountering an issue while using ng new project_name: The error message states "An invalid configuration file was found ['angular.json']. Please delete the file before running the command." I am stuck on this problem and unsure of how to ...

Attempting to render the application results in an error message stating: "Actions must be plain objects. Custom middleware should be used for asynchronous actions."

I am experiencing an issue while testing my vite + typescript + redux application to render the App component using vitest for testing. I am utilizing redux@toolkit and encountering a problem when trying to implement async thunk in the app component: Error ...

Discovering the Keys of a Multidimensional Array in JSON with AngularJS

I'm attempting to create a form using a JSON array. I want to display the keys in the HTML. Check out this example array: { "Fred": { "description": "A dude" }, "Tomas": { "description": "Another Dude", "Work": { "Current" ...

Get the Binary file ready to transfer to an android device from the Server

**Please ensure that this question pertains to transferring a file from the server directory to an Android device, not directly via URL I have noticed several queries and examples discussing how to transfer the file "file.xls" from www.xxx.com/file.xls. H ...

Reactjs may have an undefined value for Object

I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...

What is the best way to bring a local package into another npm package and verify its functionality using Typescript?

In a scenario where there are 3 npm projects utilizing Webpack and Typescript, the folder structure looks like this: ├── project1/ │ ├── tsconfig.json │ ├── package.json │ ├── src/ │ │ └── index.ts │ ...

Refreshing Components upon updates to session storage - Angular

Currently, I am in the process of developing a build-a-burger website using Angular. The ingredients and inventory need to be updated dynamically based on the selected location. Users can choose the location from a dropdown menu in the navigation bar. The ...

A Guide to Catching Targeted React Notifications in Sentry using Next.js

In my Next.js application, I have implemented Sentry for error tracking. While I have successfully set up Sentry to capture errors within my try/catch blocks, I am currently struggling with capturing specific errors and warnings at a global level in my sen ...

Error encountered when creating a new project using ASP.NET Core (.NET 5) and Angular 11

When I start a new ASP.NET Core Web API + Angular project in Visual Studio by using: dotnet new angular, it sets up a .NET 5 project with an Angular 8.2 project in the ClientApp folder. After hitting F5, everything runs smoothly. However, I want to work ...

After running `npm uninstall -g angular-cli`, I thought I had successfully removed angular-cli from my system. To my surprise, when I checked `ng --

What's the deal here? I uninstalled angular-cli globally on my laptop by running npm uninstall -g angular-cli, and now it's gone. But on my desktop, I can still use ng --version even after removing angular-cli globally. Any idea what's ha ...

Ways to interpret WebSocket connection as a JSON data flow?

When my client connects to a websocket server, all communications are in json format. I am using the ClientWebSocket along with its ReceiveAsync method as described in the documentation. Here is how my read loop operates: byte[] data = new byte[4096]; Arr ...

The element within the iterator is lacking a "key" prop, as indicated by the linter error message in a React component

Encountering an error stating Missing "key" prop for element in iteratoreslintreact/jsx-key {[...Array(10)].map((_) => ( <Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} /> ))} An attempt to resolve this issue was made ...

Is there a way to replace null values with empty strings when using json_encode?

I'm struggling to change null values to empty strings in the output of my json_encode: if ($uresult->num_rows >0) { while($urow = $uresult->fetch_assoc()) { $rresult = mysqli_query($con,"SELECT * FROM allid WHERE postid='$oldi ...

The 'Show All' lengthMenu option in Datatables is causing an invalid JSON error

I am experiencing an intermittent 'INVALID JSON' error with my dataTables when selecting 'All' from the lengthMenu select input. Can anyone provide insight into what might be causing this issue? Below is my dataTables script: var ...

Learn how to restrict input to only specific characters in an input box using Angular2 and validations

Is it possible to restrict user input in an input box to only specific characters such as '7' and '8'? I tried adding validations with attributes like type="number", min="7" and max="8", but even then other keys can be inserted before v ...

Executing Promises in a loop: TypeScript & Angular with IndexedDB

Currently, I am working on a data synchronization service where data is being retrieved from a web service and then stored in IndexedDB. In my TypeScript Angular Service, the code looks something like this: this.http .post(postUrl, postData) .suc ...

Transform CVS file into JSON format while allowing duplicate keys

Working on a project, I receive data in an Excel sheet which I convert to CSV using Excel. These files contain measurements with different categories but the same ID. For example: readingId; category; result; 1 ; cat 1 ; A 1 ; cat 2 ; B ...