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

In what way can I utilize const assertions to extract literal types from deeply nested objects?

Let's imagine I have a unique set of individuals: const group = { Alex: ['Ben', 'Chris'], Sarah: ['Dylan'], } as const; With the help of constant clarifications, I can define the specific types like so: type Parent = ...

Unable to retrieve checkbox array using the Request class in phpBB 3.3

I am working on a POST form that includes checkboxes generated dynamically in a loop using PHP: echo '<input class="form-check-input" type="checkbox" name="delist_ids[]" value="'.$row['id'].'&q ...

How can we extract specific data from a JSON file in Python3? I need to retrieve information from the data pool

Recently, I've been delving into extracting data from a JSON file that contains stock information. Coming from a beginner's background in Python, the world of JSON feels quite alien to me. However, I grasp the fundamental concepts and could use s ...

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

In TypeScript, there is a unique feature available for defining properties with values using the `value` keyword. class Test { constructor(private value: number = 123) { } public MyValueProperty: number = 5; } Here is how you can define such ...

Controller for Ionic 3 styles and loading animations

What is the best way to eliminate these white spaces in our fullscreen mode? View the image here removeWhiteSpace() { let space = document.getElementById('white-space'); if (space) { space.style.display = 'none'; ...

Error Encountered: Invalid request while attempting to authenticate with Docusign Python SDK

Trying to utilize the Docusign Rest API by following the sample code on the Python SDK available on Github at this link: https://github.com/docusign/docusign-python-client. After replacing the required values with the obtained keys and URLs from Docusign, ...

Reacting to the surprise of TS/JS async function behaving differently than anticipated

It appears that I'm facing a challenge with the small method; not sure if my brain is refusing to cooperate or what's going on. async fetchContacts() { await this.http.get('http://localhost:3000/contacts') .subscribe(res =& ...

Remove certain data from a json document

I am facing a challenge with a json file that contains multiple 'blocks' within a help list. I want to delete each block without removing the entire help list. After some trial and error, I was able to come up with a solution using Python: import ...

Unable to classify mapRef.current

I am facing an issue with my react component that contains a leaflet map. TypeScript is warning me about line mapRef.current.setView(coords, 13), stating it is an "unsafe call of an any typed value" import 'leaflet/dist/leaflet.css'; import { Map ...

JavaScript application throwing error: "require is not defined"

Currently, I am working on storing an array in a .json file using NodeJS. However, when trying to execute the code below, I encountered an error message saying require is not defined. Can someone provide some guidance on how to resolve this issue? let ans ...

Analyzing random sequences of bits within a byte array using c

In my C code, I am working with a couple of uint8_t arrays and need to compare specific sequences of bits between them. For instance, I have bitarray_1 and bitarray_2, and I want to compare bits 13-47 from bitarray_1 with bits 5-39 from bitarray_2. What is ...

Arrange a JSON file by organizing a key located within an array of dictionaries using Python

Here's a structure that I am working with: [{ "name": "apple", "price": "5.0", "record": [ { "id": "008", "time": 1465689600 } ] },{ "name": "banana", "price": "9.0", "record": [ ...

What is the process of integrating passportjs(node) API with the Angular cli?

After successfully configuring Node.js with PassportJS OAuth2, the need arose for Angular to call the Node API. However, they are running on different ports. While calling all of Node.js's REST APIs from Angular works fine using proxy.conf.json, an er ...

the process of altering properties in vue js

After running my Vue file, I encountered the following console error. As someone new to Vue programming, I'm attempting to utilize a Syncfusion UI component to display a grid. Prop being mutated: "hierarchyPrintMode" I am unsure where to add the comp ...

The current situation is not effective; it is causing an error saying "Uncaught TypeError: Cannot read property 'substring' of undefined"

Encountering an error "Uncaught TypeError: Cannot read property 'substring' of undefined" while debugging in Chrome Inspector, with the following code: <script type="text/javascript"> $(function countComments() { var mcount = '/ ...

Delete the final comma from both a JSON document and a PHP script

Currently, I am dealing with a JSON file in PHP and need to eliminate the last comma as it is causing an error within my code snippet: { "data": [ <?php require_once("../../config.php"); $qtodos = $mysqli->query("SELECT * FROM negocios"); ...

core.js:5873 - An issue occurred where the property 'filename' could not be read due to being undefined

My aim is to upload images to my Node.JS server and retrieve them from an Angular client using the provided code snippets: image.ts: export class Image { fieldname: string; originalname: string; encoding: string; mimetype: string; des ...

What is the best way to refine spinner options according to the selection made in another spinner

I am facing an issue with my Spinners citySpinner, regionSpinner, and branchSpinner. I am able to populate the data in the spinners, but the problem arises when I select a region like UP from spinnerRegion. In this case, I only want to display cities relat ...

Experiencing problems with the Locale setting when utilizing the formatNumber function in Angular's core functionalities

I am having trouble formatting a number in Angular using the formatNumber function from the Angular documentation. Here is my code snippet: import {formatNumber} from '@angular/common'; var testNumber = 123456.23; var x = formatNumber(Numb ...

How to display JSON Data in a Line Chart widget using Flutter?

I need assistance with creating a line chart that will display data from a JSON file located in the assets folder. However, I am unsure of how to proceed in developing the line chart using the JSON Data. Can someone please provide guidance and help me with ...