Creating a map based on data retrieved from a JSON response

Question

Creating a map based on data retrieved from a JSON response

I am currently faced with an issue involving data retrieved from an API in JSON format, where the entries are structured as maps with number keys. Due to this structure, I am unable to assign my result to the data structure below due to missing Map methods.

entryContainer = {
    entries: {
        1: {
            title: 'title 1'
        },
        2: {
          title: 'title 2'
        }
}

export interface EntryContainer {
    entries: Map<number, Entry>;
}

export interface Entry {
    title: string;
}

// The current assignment does not work
let result: EntryContainer = entryContainer;

Could anyone suggest a more elegant approach to initializing the Entrycontainer with data obtained in the aforementioned format?

typescript

Answer 1

Answer №1

The content in the information you're receiving isn't structured as a Map, so it will be necessary to construct a new Map.

The great news is that this process can be easily achieved using Object.entries along with new Map:

let result: EntryContainer = {
    content: new Map(Object.entries(entryContainer.content).map(([key, value]) => [+key, value]))
};

This code snippet:

Utilizes Object.entries to obtain an array of [string, string] pairs.
Applies map to transform the array into [number, string] pairs instead. (It's important to note that keys within your entryContainer object are treated as strings, even if represented by numeric literals.)
Takes the resulting array of [number, string] pairs and constructs the new content map.
Wraps the created content map inside the EntryContainer.

Please make sure that your configurations for target and/or lib are properly set. Keep in mind that Map belongs to ES2015 while Object.entries is part of ES2017 standards.

Answer 2

The content in the information you're receiving isn't structured as a Map, so it will be necessary to construct a new Map.

The great news is that this process can be easily achieved using Object.entries along with new Map:

let result: EntryContainer = {
    content: new Map(Object.entries(entryContainer.content).map(([key, value]) => [+key, value]))
};

This code snippet:

Utilizes Object.entries to obtain an array of [string, string] pairs.
Applies map to transform the array into [number, string] pairs instead. (It's important to note that keys within your entryContainer object are treated as strings, even if represented by numeric literals.)
Takes the resulting array of [number, string] pairs and constructs the new content map.
Wraps the created content map inside the EntryContainer.

Please make sure that your configurations for target and/or lib are properly set. Keep in mind that Map belongs to ES2015 while Object.entries is part of ES2017 standards.

Creating a map based on data retrieved from a JSON response

Answer №1

Similar questions

Reorganizing Execution Order in AfterViewInit with Subscriptions in Angular 10

The error message "Unable to access property 'open' of an undefined menu" is being displayed in a TypeScript code

Guide to Setting Up "Remember Me" Login for Users in Angular

The variable <variable> is not meeting the 'never' constraint. Error code: ts(2344)

A guide on exposing TypeScript classes globally through a WebPack bundle in JavaScript

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Using a template literal with the keyof operator as an interface property

Dealing with side effects in react/redux: Best practices and tips

A guide on creating a concatenation function using TypeScript

Implementing React custom component with conditional typing

using any class as a function parameter in TypeScript

The npm script for running Protractor is encountering an error

Exploring the concept of asynchronous subscriptions in Angular

Retrieve the implementation of an interface method directly from the constructor of the class that implements it

Implementing Limited Results in Redis FT.SEARCH with TypeScript

Angular Tutorial: Understanding the Difference Between TypeScript's Colon and Equal To

Encountering a Circular JSON stringify error on Nest.js without a useful stack trace

"Troubleshooting a case where mongoDB's updateOne function is

Difficulties in Networking Requests Following Event Emitter Notification in an Angular Application

Exploring the power of async/await and promise in TypeScript