Converting a JSON string into an ES6 map or another data structure in JavaScript in order to maintain the order of keys

Question

Converting a JSON string into an ES6 map or another data structure in JavaScript in order to maintain the order of keys

Are there any built-in methods in ES6, JavaScript, or TypeScript to directly convert a JSON string to an ES6 map while preserving the order of keys, or is implementing a custom parser the only option?

Note: I am intentionally avoiding the use of "parse" to prevent converting the JSON string to an object with unordered keys.

For example:

{"b": "bar", "a": "foo" }        // <-- Example JSON string

I would like to achieve:

{ b: "bar", a: "foo" }           // <-- Desired output as a map

javascript typescript ecmascript-6

Answer 1

Answer №1

UPDATE

https://jsbin.com/kiqeneluzi/1/edit?js,console

In my latest approach, I utilize regex to extract keys from a JSON string while maintaining their order.

let j = "{\"b\": \"bar\", \"a\": \"foo\", \"1\": \"value\"}"
let js = JSON.parse(j)

// Using regex to get keys and maintain the order
let myRegex = /\"([^"]+)":/g;
let keys = []
while ((m = myRegex.exec(j)) !== null) {
    keys.push(m[1])
}

// Transform each key into an object
let res = keys.reduce(function (acc, curr) {
     acc.push({
         [curr]: js[curr]
    });
    return acc
}, []);


console.log(res)

ORIGINAL

If you're looking for an alternative solution for option 2, here's what I have devised.

https://jsbin.com/pocisocoya/1/edit?js,console

let j = "{\"b\": \"bar\", \"a\": \"foo\"}"

let js = JSON.parse(j)

let res = Object.keys(js).reduce(function (acc, curr) {
    acc.push({
      [curr]: js[curr]
    });
    return acc
}, []);


console.log(res)

This method involves retrieving all keys of the object and then applying a reduce function to convert each key into an object.

Answer 2

UPDATE

https://jsbin.com/kiqeneluzi/1/edit?js,console

In my latest approach, I utilize regex to extract keys from a JSON string while maintaining their order.

let j = "{\"b\": \"bar\", \"a\": \"foo\", \"1\": \"value\"}"
let js = JSON.parse(j)

// Using regex to get keys and maintain the order
let myRegex = /\"([^"]+)":/g;
let keys = []
while ((m = myRegex.exec(j)) !== null) {
    keys.push(m[1])
}

// Transform each key into an object
let res = keys.reduce(function (acc, curr) {
     acc.push({
         [curr]: js[curr]
    });
    return acc
}, []);


console.log(res)

ORIGINAL

If you're looking for an alternative solution for option 2, here's what I have devised.

https://jsbin.com/pocisocoya/1/edit?js,console

let j = "{\"b\": \"bar\", \"a\": \"foo\"}"

let js = JSON.parse(j)

let res = Object.keys(js).reduce(function (acc, curr) {
    acc.push({
      [curr]: js[curr]
    });
    return acc
}, []);


console.log(res)

This method involves retrieving all keys of the object and then applying a reduce function to convert each key into an object.

Answer 3

Answer №2

const convertJsonToMap = (jsonString) => {
    return new Map(JSON.parse(jsonString));
}

For further information, you can visit:

Answer 4

const convertJsonToMap = (jsonString) => {
    return new Map(JSON.parse(jsonString));
}

For further information, you can visit:

Answer 5

Answer №3

Implementing a for-in loop

let map = new Map();
let jsonObj = {a:'a',b:'b',c:'c'}

for (let i in jsonObj){
map.set(i,jsonObj[i]);
}

On a side note, I came across the comment below and it made me realize that maps are not ordered because they utilize keys rather than indexes to store data.

Answer 6

Implementing a for-in loop

let map = new Map();
let jsonObj = {a:'a',b:'b',c:'c'}

for (let i in jsonObj){
map.set(i,jsonObj[i]);
}

On a side note, I came across the comment below and it made me realize that maps are not ordered because they utilize keys rather than indexes to store data.

Converting a JSON string into an ES6 map or another data structure in JavaScript in order to maintain the order of keys

Answer №1

Answer №2

Answer №3

Similar questions

Guidelines on executing a function after page load in meteor

jQuery: Performing actions on elements that are both statically included and dynamically generated (using delegated events)

AJAX enhancing the functionality of the webgrid with dynamic filtering

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

Tips for concealing material input

Error encountered when trying to convert a React Higher Order Component (HOC) to TypeScript: "Exported variable referencing private name"

Tips for Maintaining User Data Across Pages in React using React-Router-Dom and Context

Is it possible to create a personalized serialize form when sending an AJAX POST request

Preventing jQuery Validate Plugin from Validating on Blur Events for a Custom Feature

Bringing a JavaScript file into an Ionic/Angular 2 project

Storing binary data uploaded via AJAX in PHP on the server is essential for maintaining

What are the best ways to store internal files in node.js for faster access?

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

Express.js: Request body with an undefined base64 encoding

Verify if the script has already been loaded. If not, proceed to load it asynchronously

Executing specific rendering procedures based on conditions for mapped data - React

A collaborative effort on Facebook, Twitter, and GooglePlus involves generating SCRIPT tags collectively

What is the best way to set up TSLint to apply specific rules with one line and different rules with another line

Tips for updating a selected value without altering the reference value

When invoked by a client-side JS function through XHR, Express fails to render the page in the browser