Tips for saving a Typescript Map in an Ionic app

Within my application, I am dealing with objects that have a Map<number,any[]> attribute. Currently, I am using localForage for persistence. However, when the Map is saved and viewed on an Android or Windows device (browser simulation), it works fine but encounters issues on iOS and even fails to work on my Android device.

Here is some sample code illustrating the problem:

let myMap: Map < number, any[]& gt; = new Map();
myMap.set(1,['banana','pimento']);
console.log(myMap);
localForage.config({});
localForage.setItem("myMap",myMap)
 .then(() => localForage.getItem("myMap")
  .then(map => console.log(map))
);

The map displays correctly on Android and Windows (browser simulation) but not on iOS due to the use of a webSQL database instead of indexedDB which is used by the former platforms.

Should I serialize the data? Is there a more effective way to store the data that would resolve this issue?

typescriptionic2localforage

Answer №1

In order to solve the issue at hand, I discovered that serializing the Map object can be accomplished using the following method:

JSON.stringify(Array.from(myMap.entries()));

Subsequently, the deserialization process can be carried out with the following code:

new Map<any, any>(JSON.parse(myMapFromStorage));

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 a click event to target the next div and apply a CSS class using Typescript

I am trying to create a Typescript function that will locate the next div and apply a CSS class to it. Here is what I have attempted: <ul> <li><a href="#" onclick="toggle()">Item 1</a></li> <div class="content hide ...

javascripttypescript

Angular2 Service Failing to Return Expected Value

It's frustrating that my services are not functioning properly. Despite spending the last two days scouring Stack Overflow for solutions, I haven't been able to find a solution that matches my specific issue. Here is a snippet of my Service.ts c ...

javascriptjsonangulartypescriptangular2-services

Typescript: Delivering outcomes in a promising way

How do I convert the function below to return a promise for proper handling in the Page where it is called? getUploads() { const rootDef = this.db.database.ref(); const uploadsRef = rootDef.child('userUploads').orderByChild('time&ap ...

javascripttypescriptpromise

Calculating the number of entities in an array using RxJS observable in Typescript (Angular 4)

I'm struggling to figure out how to retrieve the number of elements in an array-like Observable without getting back another Observable. I've spent a lot of time experimenting with different operators, but none have been successful. Here's ...

angulartypescriptrxjsobservable

Can a NULL value be passed into a SQL Server Stored Procedure from Typescript?

I'm currently facing a dilemma where I need to assign a Null value to a uniqueidentifier variable in a stored procedure. The issue arises when attempting to pass an empty string to the variable, resulting in the error message "Cannot convert varchar t ...

sql-servertypescriptvue.js

What is the best way to retrieve the date and time in mm-dd-yyyy hh-mm-ss format using typescript?

Right now, I am receiving date and time in the format 'mm/dd/yyyy, hh:mm:ss'. Is there a way to retrieve it in this format 'mm-dd-yyyy hh-mm-ss' without relying on any external libraries, and by potentially passing certain arguments to ...

javascripttypescriptdateangular5

The Mocha evaluation is passing, even though the URL handler functionality has not been developed yet

I have recently developed a Firebase function and I am looking to test it locally using the Google Cloud Function Emulator along with Mocha. To achieve this, I have set up a test in Mocha specifically for testing the REST API update record function using ...

node.jstypescriptmocha.jsgoogle-cloud-functions

A TypeScript-enabled functional React component utilizing an onClick event handler for an anchor tag

I am working on a React component in TypeScript: interface Props { children: React.ReactNode; href: string; onClick?: (e: any) => void; } const Input: React.FC<Props> = ({ children, href, onClick }) => ( <a className="A" href={href ...

javascriptreactjstypescriptreact-functional-component

Creating HTML content in TypeScript with NativeScript using document.write()

Essentially, I am looking to create a set number of labels at various row and column positions depending on the user's input. However, I have been unable to find any resources that explain how to write to the .component.html file from the .component.t ...

javascriptangulartypescriptnativescript

Creating a TypeScript custom type checker for checking the length of strings

I'm currently developing a React component that requires a string prop to have a maximum length of 10 characters. My goal is for the compiler to trigger an error whenever a user attempts to pass a string longer than 10 characters. interface Componen ...

reactjstypescript

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Currently, I am utilizing react router and typescript in order to extract the id variable from a route for use in a component. However, typescript is raising an issue: The type '{}' lacks the following properties found in type 'match' ...

javascriptreactjstypescript

How can webpack and babel be configured to manage TypeScript's private keyword?

I am currently using webpack and babel to compile typescript, but I have encountered an issue with the private keyword in Typescript. While they are working fine with compiling files in general, they do not seem to properly handle the private keyword. I ha ...

typescriptwebpackbabeljs

The node command line does not recognize the term 'require'

My Typescript project was compiling and running smoothly until recently when I started encountering the error ReferenceError: require is not defined every time I try to run node. I am uncertain whether this issue stems from Typescript, as even when I ru ...

node.jstypescriptrequirecommonjs

Update the Material V4 Style ts file to the latest version, Material V5

I am currently in the process of upgrading from material v4 to v5. The problem I am encountering is related to a styles.ts file that I used to import into my component. Initially, the beginning of the class looked like this: import { defaultFont, prima ...

reactjstypescriptmaterial-ui

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

javascriptreactjstypescriptgun

Utilizing TypeScript Generics to Dynamically Set Tag Names in React

I am working on a straightforward polymorphic React component that is designed to render only tag names (such as span) and not custom React components (like MyComponent). I believe this can be achieved using JSX.IntrinsicElements. Here is the code snippet ...

reactjstypescriptpolymorphismjsx

Guide on incorporating text input areas into specific positions within a string

Looking for a way to replace specific words in a string with input fields to enter actual values? For example... Dear Mr. [Father_name], your son/daughter [name] did not attend class today. This is what I want it to look like... Dear Mr. Shankar, your ...

javascriptangulartypescript

Solving the TypeScript error: "Element implicitly has an 'any' type because an expression of type 'string' cannot be used to index type"

I'm having difficulty properly declaring a variable in my code. Here is the code snippet I am working with: ngOnInit(): void { this.activatedRoute.fragment.subscribe(numberOfTab => { if (numberOfTab) { this.tabs[numberOfTab].active = true; } else ...

angulartypescript

Understanding File Reading in Angular/Typescript

I'm currently developing an app similar to Wordle and I'm facing an issue with reading words from a file. Here's what I tried: import * as fs from 'fs'; const words = fs.readFileSync('./words.txt', 'utf-8'); con ...

node.jsangulartypescript

Ensure that Angular waits for the subscription to be completed before triggering the function to generate an Excel

I've encountered an issue with a function that generates an excel from an API request on my webpage. There's a download button that triggers the downloadCSV() function, which usually works fine except when I click it too quickly while navigating ...

angularexceltypescript