Transmit the map via res.send in Express

Question

Transmit the map via res.send in Express

My friend and I are collaborating on a game project, but we're encountering an issue when trying to send a Map with some data in it. Instead of receiving the actual Map, Express is sending the user {}. Strangely enough, when I use console.log to check the Map, it does display correctly. Here's the code snippet:

router.get("/list", async (req, res) => {
    try {
        const users = await userCollection.find();
        accessedListEmbed(req);
        let userData = new Map();
        users.forEach((user) => userData.set(user.userName, user.status));
        res.send(userData);
        console.log(userData);
    } catch (error) {
        res.send("unknown");
    }
});

https://i.sstatic.net/7v4Fe.png https://i.sstatic.net/UmVLl.png

javascript express

Answer 1

Answer №1

Typically, when sending data over the network, it is important to note that only serializable values can be transmitted. This means that maps are not serializable:

const map = new Map();
map.set('key', 'value');
console.log(JSON.stringify(map));

To work around this limitation, you could consider sending an array of arrays that can later be converted into a Map on the client side. Alternatively, using a different data structure like a plain object may also be a viable solution. Here's an example:

router.get("/list", async (req, res) => {
    try {
        const users = await userCollection.find();
        accessedListEmbed(req);
        const userDataArr = [];
        users.forEach((user) => {
            userDataArr.push([user.userName, user.status]);
        });
        res.json(userDataArr); // make sure to use .json
    } catch (error) {
        // send JSON in the case of an error too so it can be predictably parsed
        res.json({ error: error.message });
    }
});

Then on the client-side:

fetch(..)
    .then(res => res.json())
    .then((result) => {
        if ('error' in result) {
            // do something with result.error and return
        }
        const userDataMap = new Map(result);
        // ...

Consider implementing a similar approach for handling non-serializable data.

Answer 2

Typically, when sending data over the network, it is important to note that only serializable values can be transmitted. This means that maps are not serializable:

const map = new Map();
map.set('key', 'value');
console.log(JSON.stringify(map));

To work around this limitation, you could consider sending an array of arrays that can later be converted into a Map on the client side. Alternatively, using a different data structure like a plain object may also be a viable solution. Here's an example:

router.get("/list", async (req, res) => {
    try {
        const users = await userCollection.find();
        accessedListEmbed(req);
        const userDataArr = [];
        users.forEach((user) => {
            userDataArr.push([user.userName, user.status]);
        });
        res.json(userDataArr); // make sure to use .json
    } catch (error) {
        // send JSON in the case of an error too so it can be predictably parsed
        res.json({ error: error.message });
    }
});

Then on the client-side:

fetch(..)
    .then(res => res.json())
    .then((result) => {
        if ('error' in result) {
            // do something with result.error and return
        }
        const userDataMap = new Map(result);
        // ...

Consider implementing a similar approach for handling non-serializable data.

Transmit the map via res.send in Express

Answer №1

Similar questions

attempting to shift course, but finding no success

What is the best way to create a cube in Three.js with the 4 corner points of the base and a specified height?

Looking for a way to update a world map image by selecting multiple checkboxes to apply a flood fill color to different countries using Mogrify

Using node.js with express to send data stored in a variable to the browser instead of displaying it in the

Utilizing an external API in Javascript for fetching data

Update the value of a td element when a select option is changed in another td element within the same table row

Initializing the $(this) variable prior to the function declaration

"Upon clicking the login button, I encountered an issue with redirecting to the destination

Issue with remounting in Nextjs 13

Creating an array object in JavaScript using an integer variable involves utilizing the integer as the

Don't run a specific test in a Jest test file

Which is better for toggling between images/icons: a switch statement or a ternary operator?

After installing the latest version of [email protected], I encountered an error stating "Module 'webpack/lib/node/NodeTemplatePlugin' cannot be found."

Ways to remove an item from firebase database

Issues with Angular functionality

Retaining the value of a textbox while moving to another page

How can I remove all "node_modules" except for the "mocha" package?

When I run 'npm start', all I see is a blank screen. My app is not

Using JQuery live in combination with Disqus and Google Analytics is a powerful way to

What is the process for obtaining a fresh token from Cognito using the frontend?