Managing arrays in local storage with Angular 2+

I seem to be missing a crucial element in my endeavor to save and retrieve an array in local storage within my Angular 4 application.

The array is fetched from the server and stored in a variable named 'aToDo' with type 'any', like so:

{"qoption":"Trap Surveyor (<em>Competency for CM OAP<\/em>)"}

It is then saved in local storage using the following code snippet:

localStorage.setItem('aToDo',JSON.stringify(this.aToDo));

Upon retrieval from local storage, it is parsed back into the 'aToDo' variable as follows:

this.aToDo = JSON.parse(localStorage.getItem('aToDo'));

A console.log of 'this.aToDo' displays:

{"qoption":"Trap Surveyor (<em>Competency for CM OAP<\/em>)"}

However, at this point, something seems to have gone wrong. Attempting to access 'this.aToDo.qoption' results in 'undefined', and when trying to iterate over the array using *ngFor, I encounter the error message:

Error: Cannot find a differ supporting object '{"qoption":"Trap Surveyor (<em>Competency for CM OAP<\/em>)"}' of type 'string'. 

Can anyone help me identify where I went wrong? Thanks - Tom

Answer №1

There are a couple of key points to consider:

  1. If you utilize console.log without a return function, it will display "undefined" in addition to your intended output, which is standard behavior.
  2. Note that aToDo is specifically an object, not an array; therefore, ngFor cannot be employed on objects.

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

The Network plugin is having issues with the PWA application in Ionic 4

I've been utilizing the network plugin successfully on native/Cordova devices. However, I have encountered an issue when trying to use it on a PWA app (specifically when there is no wifi connection). Can anyone shed light on why this might be happenin ...

Creating an Angular project with two different base-href configurations

Angular CLI: 7.2.3 Node: 10.14.1 OS: darwin x64 Angular: 7.2.2 Currently, my index.html file includes a base href set to <base href="/" /> and the application runs at http://localhost:port/ I am wondering if there is a way for my app to run both at ...

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

While the project is running smoothly, I am noticing a multitude of errors appearing in the console of VS Code. How can I eliminate these error messages? It seems to be related to TypeScript. Additionally, I am encountering an error in the browser as well ...

Encountering an Object Type Unknown error while working with Typescript and React

I am currently working on building a chatbox in React using TypeScript and Firebase. Below is the code for my Room and Message components: function ChatRoom() { const messagesRef = firestore.collection('messages'); const query = messagesRef.o ...

Unable to bring in the directive from the Angular library

I've created this custom Directive within my library: @Directive({ selector: '[layoutHeaderTitle]', standalone: true }) export class HeaderDirective { constructor( readonly tpl: TemplateRef<any>, private re ...

Angular Formly allows for the creation of custom field types

I've been struggling to find a solution for several days now, but without any success. The issue arises when I try to use Angular Formly, Angular Material, and Angular 17 to create mat-select as a custom type. Whenever I attempt to utilize the mat-sel ...

How to determine the frequency of a specific word in a sentence using Angular 5

I need help finding a solution to count how many times a word appears in sentences. Input: k = 2 keywords = ["anacell", "cetracular", "betacellular"] reviews = [ "Anacell provides the best services in the city", "betacellular has awesome services", ...

Buffer Overflow - Security Audit - Node JS TypeScript Microservice Vulnerability Scan Report

Person Data Schema: import JoiBase from '@hapi/joi'; import JoiDate from '@hapi/joi-date'; const Joi = JoiBase.extend(JoiDate); const personDataSchema = Joi.object().keys({ person: Joi.object().keys({ personId: Joi.string().max( ...

Eliminating the most recent entry from the dropdown menu

Currently, I am exploring angular drag and drop functionality in my project. Here is the code snippet that I am using: Link to Code In the implementation, whenever an item is dropped, it automatically goes to the end of the "done" list. What I am looking ...

Conceal the Froala editor when blur events occur

Currently, I am utilizing Forala with the specific setting: initOnClick: true, Everything is running smoothly, but is there a way to accomplish the "opposite" I'm looking to hide the editor upon blur? I have searched through the documentation, but d ...

When trying to access instance member variables, Observable does not allow it

Within the hotelService file, I am retrieving data from the backend API that contains information about hotels. hotelService file import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders} from "@angular/common/http"; impor ...

Webpack 4.1.1 -> The configuration.module contains a property 'loaders' that is unrecognized

After updating my webpack to version 4.1.1, I encountered an error when trying to run it: The configuration object is invalid. Webpack has been initialized with a configuration that does not match the API schema. - The 'loaders' property in ...

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

Clicking on an Angular routerLink that points to the current route does not function unless the page is re

Currently, I am working on an E-commerce project. In the shop page, when a user clicks on the "View More" button for a product, I redirect them to the product details page with the specific product id. <a [routerLink]="['/product-details' ...

Tips for testing Observable.fromEvent

Can you provide a method to test Observable.fromEvent using jasmine? @ViewChild('d') private inputDatePicker: NgbInputDatepicker; this.subscription = Observable.fromEvent(document, 'click').subscribe((event: KeyboardEvent) => { ...

Troubles arise when compiling TypeScript to JavaScript

I have been experimenting with TypeScript, specifically for working with classes. However, I am facing an issue after compiling my TS file into JS. Below is the TypeScript code for my class (PartenaireTSModel.ts): export namespace Partenaires { export ...

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. .html <ion-slides [pager]="true" [slidesPerView]="2"> <ion ...

Populating a Modal Popup with an Angular 2 Module

I am currently implementing angular 2 with bootstrap. On my dashboard page, I have a specific requirement where when a user clicks on any link, a new module should appear in a modal popup. Can you provide guidance on how to accomplish this task? Since my ...

Retrieving Child Route Parameters in Angular 7

Fetching the parameter 'id' only from the corresponding page component seems to be a challenge. The params id cannot be accessed from other individual components such as the header component. //The code snippet below works only in the correspond ...

Is NATS.io compatible with React Native?

Struggling with integrating nats.io into a React Native project using Typescript has presented many challenges. Is there a way to successfully incorporate it without having to modify node_modules of nats (such as changing the "fs" import to "react-native-f ...