Creating a map in Typescript initialized with a JSON object

Question

Creating a map in Typescript initialized with a JSON object

In my Typescript class, there is a map that I'm trying to initialize:

public map:Map<string,string>;
constructor() {
  let jsonString = {
    "peureo" : "dsdlsdksd"
  };
  this.map = jsonString;
}

The issue I'm encountering is that the initialization isn't functioning as expected.

The jsonString variable will contain data received from a Java Object serialized to Json.

If anyone has any advice or solutions, I would greatly appreciate it. Thank you!

javascript json typescript initialization

Answer 1

Answer №1

To populate the map with object members, you need to iterate through each member:

public dataMap: Map<string, string> = new Map<string, string>();

constructor() {
    let jsonData = {
        "apple": "red",
        "banana": "yellow"
    };

    for (let key in jsonData) {
        this.dataMap.set(key, jsonData[key]);
    }
}

Answer 2

To populate the map with object members, you need to iterate through each member:

public dataMap: Map<string, string> = new Map<string, string>();

constructor() {
    let jsonData = {
        "apple": "red",
        "banana": "yellow"
    };

    for (let key in jsonData) {
        this.dataMap.set(key, jsonData[key]);
    }
}

Answer 3

Answer №2

Initially, I marked this question as a potential duplicate. However, upon further consideration, I realized that there are significant differences between plain JavaScript and TypeScript, making it a unique question ... my mistake!

After deserialization, the JSON results in a plain object.

Map is a distinct class, and converting a plain object into a Map object is not straightforward.

The Map documentation specifies that its constructor accepts:

An Array or other iterable object containing key-value pairs. Each pair is added to the new Map; null values are treated as undefined.

Unfortunately, plain objects do not support iteration, preventing direct conversion to a Map.

One approach is to iterate over the properties, validate if they are strings, and then insert them into the map.

let convertObjectToStringPropertiesToMap = (obj: Object) => {
    let map = new Map();

    for (let key in obj) {
        let val = obj[key];

        if (typeof val == "string")
            map.set(key, val);
    }
};

This would result in code similar to the following:

let obj = {
    "example" : "sample"
};

let convertObjectToStringPropertiesToMap = (obj: Object) => {
    let map = new Map();

    for (let key in obj) {
        let val = obj[key];

        if (typeof val == "string")
            map.set(key, val);
    }

    return map;
};

let map = convertObjectToStringPropertiesToMap(obj);

document.getElementById("output").innerHTML = map.get("example");

You can see this in action on jsFiddle.

Answer 4

Initially, I marked this question as a potential duplicate. However, upon further consideration, I realized that there are significant differences between plain JavaScript and TypeScript, making it a unique question ... my mistake!

After deserialization, the JSON results in a plain object.

Map is a distinct class, and converting a plain object into a Map object is not straightforward.

The Map documentation specifies that its constructor accepts:

An Array or other iterable object containing key-value pairs. Each pair is added to the new Map; null values are treated as undefined.

Unfortunately, plain objects do not support iteration, preventing direct conversion to a Map.

One approach is to iterate over the properties, validate if they are strings, and then insert them into the map.

let convertObjectToStringPropertiesToMap = (obj: Object) => {
    let map = new Map();

    for (let key in obj) {
        let val = obj[key];

        if (typeof val == "string")
            map.set(key, val);
    }
};

This would result in code similar to the following:

let obj = {
    "example" : "sample"
};

let convertObjectToStringPropertiesToMap = (obj: Object) => {
    let map = new Map();

    for (let key in obj) {
        let val = obj[key];

        if (typeof val == "string")
            map.set(key, val);
    }

    return map;
};

let map = convertObjectToStringPropertiesToMap(obj);

document.getElementById("output").innerHTML = map.get("example");

You can see this in action on jsFiddle.

Creating a map in Typescript initialized with a JSON object

Answer №1

Answer №2

Similar questions

Ways to substitute the v-model pattern with react hooks

Effective Strategies for Preserving Form Input Values during Validation Failure in Spring MVC

I'm experiencing an issue where Angular Directives are not rendering properly when fetched from a JSON

Development of a chart application involving frontend and backend components, utilizing chartjs for data visualization, mongodb for storage

The error message "string indices must be integers" is common when working with

Converting MySQL tables into JSON files

jQuery can be used to obtain the label for a checkbox with a particular value

What is the best way to receive a JSON response in CodeIgniter view after making an AJAX call?

Trouble with json_encode when dealing with a multidimensional array

Is there a different method for looping in JSX besides .map()?

Deleting specific arrays by selecting checkboxes and removing them in Vue.js

Extract core object from array of objects with lodash or javascript

Create a d.ts file in JavaScript that includes a default function and a named export

An uncaught security error occurred when attempting to execute the 'pushState' function on the 'History' object

Iterate through a directory on the local machine and generate elements dynamically

Using Slick.JS to Sync Navigation with Main Slider, Automatically Resetting to First Slide

Reveal hidden elements once the form has been submitted

Using AngularJS to bind objects with a checkbox

Can a PHP script be executed through an Ajax event?

Switching out the background image with a higher resolution one specifically for users with retina devices