Question

0

141

Views

How to add a property to my object using a map

I want to add this "visible" attribute and change my "countries" array, "el2" is being changed correctly, but my array at the end is not as expected.

The elements are entering the conditionals and being added to the new property, but at the end of the loop the array is not coming out as expected

      const countryVisible: any = ['EUA', 'CANADA']
      const countries: any = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}]

      countries.map((el2, index2) => {
        countryVisible.forEach((el, index) => {
          if (el2['name'] === el) {
             el2 = {...el2, visible: true}
            console.log(el2) // {name: 'EUA', id: '123', visible: true} and {name: 'CANADA', id: '321', visible: true}
          } else {
            el2 = {...el2, visible: false}
            console.log(el2) //{name: 'Italia', id: '322', visible: false}
          }
        })

      })

      console.log(countries)

output:

[
    {
        "name": "EUA",
        "id": "123"
    },
    {
        "name": "CANADA",
        "id": "321",
        "visible": false
    },
    {
        "name": "Italia",
        "id": "322",
        "visible": false
    }
]

output expected :

[
    {
        "name": "EUA",
        "id": "123",
        "visible": true
    },
    {
        "name": "CANADA",
        "id": "321",
        "visible": true
    },
    {
        "name": "Italia",
        "id": "322",
        "visible": false
    }
]

about 4 years ago · Santiago Gelvez

3 answers

Answer question

0

There are minor issues with your code; two issues (maybe 3):

You do not have a return el2; in the map method
You do not assign the result back to countries, and hence,
The variable countries should be declared with a let

And then, there's a major issue:

Since you're setting the state of visible based on countryVisible array instead of based on the country object being considered, a visible state can be set to false even though it was set to true the first time. Eg. EUA will be set to false in the final result.
In other words instead of checking and setting each country object just once, each is checked as many times as there are country objects.

const countryVisible = ['EUA', 'CANADA'];
let countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];

countries = countries.map((el2, index2) => {
   if( countryVisible.includes( el2['name'] ) ) {
       el2 = {...el2, visible: true};;
   } else {
      el2 = {...el2, visible: false};;
   }
   return el2;
});

console.log(countries);

A better approach:

Consider using map and just adding the visible property to the mapped element.

const countryVisible = ['EUA', 'CANADA'];
const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];

const output = countries.map(
    ({name,id}) => 
    ({name,id,visible:countryVisible.includes(name)})
);

console.log( output );

about 4 years ago · Santiago Gelvez Report

0

You can use this syntax to assign conditional property to JS object. (ES6)

const a = {
   ...(someCondition && {b: 5})
}

Or you can use Javascript Object.defineProperty built-in function

Object.defineProperty(obj, 'foo', {
  value: 1
})

about 4 years ago · Santiago Gelvez Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T23:47:44.462Z

You can replace forEach loop with .includes method

const countryVisible = ['EUA', 'CANADA'];
const countries = [{name: 'EUA', id: '123'}, {name: 'CANADA', id: '321'}, {name: 'Italia', id: '322'}];

const result = countries.map((country) => ({
  ...country, 
  visible: countryVisible.includes(country.name),
}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

0

141

How to add a property to my object using a map

3 answers

0

0

0

Find remote jobs

Andres GPT