POST request with nested Map empty

Question

I have a springboot application with a React/Typescript frontend. I current have the following two interfaces and an object created out of such.

export interface Order {
    customer_id: number;
    date: Date;
    total: number;
    spec: OrderSpec;
}

export interface OrderSpec {
    order: Map<number, number>
}

I construct an object of type Order and try to create a post request using it as follows:

return fetch(url, {
    method: method,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(item),
});

My problem is that every time a request is sent the object looks like: the order map is always empty (see... spec:{order:{}})

score 3 · Accepted Answer · answered Apr 16 '20 at 04:17

When you stringify a Map, you get an empty json object.

Either you convert your Map into an object and then post it to your api or simply change your data structure/types to store object.

you can use the code below to convert your map into js object

 let myMap = new Map();
 myMap.set(1, 'one');
 myMap.set(2, 'two');

 Object.assign({}, ...Array.from(myMap.entries()).map(([k, v]) =>({[k]: v}) ))

Refer below for more guidance on Map conversion:

Convert Map to JSON object in Javascript

https://gist.github.com/lukehorvat/133e2293ba6ae96a35ba

POST request with nested Map empty

1 Answers1