Quiero agregar este atributo "visible" y cambiar mi matriz de "países", "el2" se está cambiando correctamente, pero mi matriz al final no es la esperada.
Los elementos ingresan a los condicionales y se agregan a la nueva propiedad, pero al final del ciclo, la matriz no sale como se esperaba.
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)producción:
[ { "name": "EUA", "id": "123" }, { "name": "CANADA", "id": "321", "visible": false }, { "name": "Italia", "id": "322", "visible": false } ]salida esperada:
[ { "name": "EUA", "id": "123", "visible": true }, { "name": "CANADA", "id": "321", "visible": true }, { "name": "Italia", "id": "322", "visible": false } ]Hay problemas menores con su código; dos problemas (tal vez 3):
return el2; en el método del mapcountries y, por lo tanto,countries debe declararse con un letY luego, hay un problema importante:
visible en función de la matriz countryVisible en lugar de en función del objeto de país que se está considerando, un estado visible se puede configurar como false aunque se haya configurado como true la primera vez. P.ej. EUA se establecerá en false en el resultado final. 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);Un mejor enfoque:
Considere usar map y simplemente agregar la propiedad visible al elemento mapeado.
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 );Puede reemplazar forEach loop con el método .includes
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; }Puede usar esta sintaxis para asignar propiedades condicionales al objeto JS. (ES6)
const a = { ...(someCondition && {b: 5}) }O puede usar la función incorporada Javascript Object.defineProperty
Object.defineProperty(obj, 'foo', { value: 1 })