Transforming a TypeScript class instance containing a dictionary into a JSON formatted string

Question

Transforming a TypeScript class instance containing a dictionary into a JSON formatted string

I am seeking a solution to convert my typescript class with a dictionary into a JSON object format without the brackets.

Here is my class:

export class MediaTagRequest {
    tags: Map<string, string>; 
    constructor(tags: Map<string, string>) {
      this.tags = tags;
    }
}

This is how I instantiate it:

   let tags = new Map<string, string>();
   tags.set("city", "Karachi");  

   let mediatagRequest = new MediaTagRequest(tags);
   const headers = { 'content-type': 'application/json'}   
   const body = JSON.stringify(Object.keys(mediatagRequest.tags.entries()));

Current output:

[["city","Karachi"]]

Desired output:

{
    "tags": {
        "city": "Karachi"
    }
}

If anyone could assist me with this issue, I would greatly appreciate it. Thank you.

json typescript dictionary mapping stringify

Answer 1

Answer №1

To directly convert a map to an object, you can use Map#entries in combination with Object.fromEntries.

Here's a sample code snippet:

const m = new Map();

m.set("foo", "hello");
m.set("bar", "world");

const obj = Object.fromEntries(m.entries());

console.log(obj);

If you want to convert the entire object including maps, you can utilize the replacer parameter in JSON.stringify:

function mapReplacer(key: string | number | Symbol, value: any) {
  if (value instanceof Map) {
    return Object.fromEntries(value.entries());
  }
  
  return value;
}

class MediaTagRequest {
    tags: Map<string, string>; 
    constructor(tags: Map<string, string>) {
      this.tags = tags;
    }
}

let tags = new Map<string, string>();
tags.set("city", "Karachi");  

let mediaTagRequest = new MediaTagRequest(tags);

console.log(JSON.stringify(mediaTagRequest, mapReplacer))

Playground Link

Check out the JavaScript demonstration below:

function mapReplacer(key, value) {
  if (value instanceof Map) {
    return Object.fromEntries(value.entries());
  }
  
  return value;
}

class MediaTagRequest { 
    constructor(tags) {
      this.tags = tags;
    }
}

let tags = new Map();
tags.set("city", "Karachi");  

let mediaTagRequest = new MediaTagRequest(tags);

console.log(JSON.stringify(mediaTagRequest, mapReplacer))

Answer 2

To directly convert a map to an object, you can use Map#entries in combination with Object.fromEntries.

Here's a sample code snippet:

const m = new Map();

m.set("foo", "hello");
m.set("bar", "world");

const obj = Object.fromEntries(m.entries());

console.log(obj);

If you want to convert the entire object including maps, you can utilize the replacer parameter in JSON.stringify:

function mapReplacer(key: string | number | Symbol, value: any) {
  if (value instanceof Map) {
    return Object.fromEntries(value.entries());
  }
  
  return value;
}

class MediaTagRequest {
    tags: Map<string, string>; 
    constructor(tags: Map<string, string>) {
      this.tags = tags;
    }
}

let tags = new Map<string, string>();
tags.set("city", "Karachi");  

let mediaTagRequest = new MediaTagRequest(tags);

console.log(JSON.stringify(mediaTagRequest, mapReplacer))

Playground Link

Check out the JavaScript demonstration below:

function mapReplacer(key, value) {
  if (value instanceof Map) {
    return Object.fromEntries(value.entries());
  }
  
  return value;
}

class MediaTagRequest { 
    constructor(tags) {
      this.tags = tags;
    }
}

let tags = new Map();
tags.set("city", "Karachi");  

let mediaTagRequest = new MediaTagRequest(tags);

console.log(JSON.stringify(mediaTagRequest, mapReplacer))

Answer 3

Answer №2

You have the flexibility to choose any of these methods to construct an object and then formulate a response body based on it

Method 1

let obj = {};
tags.forEach((value, key) => {  
    obj[key] = value;
});

Method 2

let obj = {};
for (let entry of tags.entries()) {
    obj[entry[0]] = entry[1];
}

Method 3

let obj = {}; 
for (let key of tags.keys()) {  
    obj[key] = value;          
}

Formulating response body

const response = JSON.stringify({
    tags: obj
});

Answer 4

You have the flexibility to choose any of these methods to construct an object and then formulate a response body based on it

Method 1

let obj = {};
tags.forEach((value, key) => {  
    obj[key] = value;
});

Method 2

let obj = {};
for (let entry of tags.entries()) {
    obj[entry[0]] = entry[1];
}

Method 3

let obj = {}; 
for (let key of tags.keys()) {  
    obj[key] = value;          
}

Formulating response body

const response = JSON.stringify({
    tags: obj
});

Transforming a TypeScript class instance containing a dictionary into a JSON formatted string

Answer №1

Answer №2

Similar questions

Troubleshooting Recursive Logic Problem with hasOwnProperty in JavaScript and JSON

Guide on correctly setting up and utilizing refs for a themed functional component in TypeScript and React Native

Exploring the Use of Overloads and Callbacks in TypeScript

Having trouble establishing a connection with the C# Controller when processing the frontend request

Enhance the efficiency of parsing JSON data

What is the process for manually triggering an observable error?

Karma's connection was lost due to a lack of communication within 10000 milliseconds

How to eliminate top-level elements in a JSON object

Creating a validation error in Angular: When a user submits an empty form, radio buttons will be highlighted in red

Volley unable to connect to the server when attempting to retrieve JSON data in an

A guide on displaying JSON in a Twig template in Symfony2

Building Unique Password Validation with Angular 5

Angular has the ability to round numbers to the nearest integer using a pipe

Alert: Using Angularfire SDK could result in console log issues

What is the best way to showcase information from a JSON file using AngularJS?

Error: Missing key 'client'

Tips on how to iterate through a JSON object and store its values in an array

Visualizing connections between elements using SVG from JSON data files

Retrieve the inventory of assets linked to a Solana wallet address

Tips on storing JSON array data in mongoose via req.body?