Insert items into a frozen map

Question

Insert items into a frozen map

I'm dealing with an immutable map and iterating through an array to create objects that I want to place inside the map. What would be the correct approach to achieve this? Below is my current code snippet:

let arrayOfNames = ['John', 'Lisa'];

arrayOfNames.forEach(function(name) {
  let id = generateId();
  let newPerson = {
    id: id,
    name: name,
  };

  // people represents the immutable map
  people.set(id, newPerson);
});

The issue is that when I try to console.log(people), John and Lisa are not included in the output because people is immutable.

I have a solution for inserting one element into the map and assigning it to a new variable:

let newPeople = people.set('3', {id: 3, name: 'John'});

But how can I handle this when I need to iterate through multiple elements?

javascript immutable.js

Answer 1

Answer №1

To properly update the people variable within a loop, you need to ensure it is reassigned each time.

let people = ... // make sure to use let instead of const

arrayOfNames.forEach(function(name) {
  let id = generateId();
  let newPerson = {
    id: id,
    name: name,
  };

  // Here, we are updating the immutable map stored in the 'people' variable
  people = people.set(id, newPerson);
});

let people = new Immutable.Map();

['Alice', 'Jane'].forEach((name, id) => {
  people = people.set(id, {id, name})
})

console.log(people)

// or using reduce

const people2 = ['John', 'Peter'].reduce((map, name, id) => map.set(id, {id, name}), new Immutable.Map)

console.log(people2)

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c25212139382d2e20290c7f6274627d">[email protected]</a>/dist/immutable.js"></script>

Answer 2

To properly update the people variable within a loop, you need to ensure it is reassigned each time.

let people = ... // make sure to use let instead of const

arrayOfNames.forEach(function(name) {
  let id = generateId();
  let newPerson = {
    id: id,
    name: name,
  };

  // Here, we are updating the immutable map stored in the 'people' variable
  people = people.set(id, newPerson);
});

let people = new Immutable.Map();

['Alice', 'Jane'].forEach((name, id) => {
  people = people.set(id, {id, name})
})

console.log(people)

// or using reduce

const people2 = ['John', 'Peter'].reduce((map, name, id) => map.set(id, {id, name}), new Immutable.Map)

console.log(people2)

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c25212139382d2e20290c7f6274627d">[email protected]</a>/dist/immutable.js"></script>

Answer 3

Answer №2

To take a different approach, you could start by "preparing" the new people map and then combining it with the current map.

For example:

const freshPeopleMap = Immutable.Map(['John', 'Lisa'].map(function(personName) {
    let id = generateId();
    let newPerson = {
        id: id,
        name: name,
    };

    return [id, newPerson];
}));

const combinedPeopleMap = people.merge(freshPeopleMap);

By following this method, you maintain immutability, which is likely the reason you are utilizing Immutable.js in the first place. ;)

Answer 4

To take a different approach, you could start by "preparing" the new people map and then combining it with the current map.

For example:

const freshPeopleMap = Immutable.Map(['John', 'Lisa'].map(function(personName) {
    let id = generateId();
    let newPerson = {
        id: id,
        name: name,
    };

    return [id, newPerson];
}));

const combinedPeopleMap = people.merge(freshPeopleMap);

By following this method, you maintain immutability, which is likely the reason you are utilizing Immutable.js in the first place. ;)

Insert items into a frozen map

Answer №1

Answer №2

Similar questions

Utilize communication channels to access electron's main process functions from the render process once deployment is complete

Please ensure the public_id parameter is included and provide the necessary value for the imageId when working with Cloudinary

Utilizing precise data types for return values in React hooks with Typescript based on argument types

The state variables of React components do not always retain their most recent value

AngularJS is encountering an issue where it cannot locate the App Module

Obtaining a JavaScript object reference within a jQuery callback

Error: The process.binding feature is not supported in the current environment (browserify + selenium-webdriver)

Refreshing webpage content by utilizing iframes

Retrieving data from a different thread in JavaScript

Canvas image zoom and crop feature ensures fixed selection area across all platforms

Error encountered with STRIPE PAYMENT GATEWAY: "Customer cus_xxxx is missing card with ID tok_visa"

Transform your HTML audio player into a Vue component

Keeping Record of Assurances

Developing a customizable datepicker with the ability to select specific months or date ranges

Is it possible to use ref in React to reference various elements based on specific actions?

Issue with AnimeJS Motion Path causing element to deviate from desired SVG path

Utilize the ConditionExpression to update the status only when the current status is not equal to 'FINISH'

The execution of a function within context is not triggered

Arrow function in JSX syntax within a render method

Tips for effectively linking a ReactJS component to Redux with the help of react-redux