Quiero crear un objeto de una lista dentro de una matriz. Tengo una matriz que es dinámica y se supone que debe verse así:
var dynamicArray = ["2007", "2008", "2009", "2010"];
Y quiero hacer un objeto como este con algo de JavaScript ES6:
const obj = { 2007: { x: width / 5, y: height / 2 }, 2008: { x: (2 / 5) * width, y: height / 2 }, 2009: { x: (3 / 5) * width, y: height / 2 }, 2010: { x: (4 / 5) * width, y: height / 2 } }
No te preocupes por los objetos internos. Solo quiero crear una estructura como esta:
obj = { 2007: ..., 2008: ..., ... }
Por favor ayuda, gracias.
Simplemente
const obj = {}; for (const key of yourArray) { obj[key] = whatever; }
o si prefieres el estilo "funcional":
const obj = yourArray.reduce((o, key) => Object.assign(o, {[key]: whatever}), {});
usando el operador de extensión de objeto moderno:
const obj = yourArray.reduce((o, key) => ({ ...o, [key]: whatever}), {})
Ejemplo:
[ { id: 10, color: "red" }, { id: 20, color: "blue" }, { id: 30, color: "green" } ].reduce((acc, cur) => ({ ...acc, [cur.color]: cur.id }), {})
Producción:
{red: 10, blue: 20, green: 30}
Así es como funciona:
reduce
se inicializa con un objeto vacío (vacío {}
al final), por lo tanto, las variables de la primera iteración son acc = {}
cur = { id: 10, color: "red" }
. La función devuelve un objeto: esta es la razón por la cual el cuerpo de la función está entre paréntesis => ({ ... })
. El operador de propagación no hace nada en la primera iteración, por lo que red: 10
se establece como primer elemento.
En la segunda iteración, las variables son acc = { red: 10 }
cur = { id: 20, color: "blue" }
. Aquí el operador de propagación expande acc
y la función devuelve { red: 10, blue: 20 }
.
Tercera iteración acc = { red: 10, blue: 20 }
cur = { id: 30, color: "green" }
, por lo que cuando acc
se distribuye dentro del objeto, nuestra función devuelve el valor final.
El nuevo Object.fromEntries
, de ECMAScript 2019, hace que sea aún más fácil transformar valores de una matriz en claves en un objeto como sigue
const dynamicArray = ["2007", "2008", "2009", "2010"]; const obj = Object.fromEntries( dynamicArray.map(year => [year, { something: "based", on: year }]) ) console.log(obj)
O tal vez para resolver su propio problema original
const width = 1920 const height = 1080 const dynamicArray = ["2007", "2008", "2009", "2010"]; const obj = Object.fromEntries( dynamicArray.map((year, i) => [year, { x: (( i + 1) / 5) * width, y: height / 2 }]) ) console.log(obj)
en js con la función de reducción de es6 para la matriz, lo hago así
let x = [1,2,3] let y = x.reduce((acc, elem) => { acc[elem] = elem // or what ever object you want inside return acc }, {}) console.log(y) // {1:1, 2:2, 3:3}