I need to join and order 2 arrangements, and I have not succeeded.
the first array contains "categories" of pokemons
and the second array contains pokemons and some data.
I need to join both arrays, sum the power value of each pokemon and show them in this way
expected result
[
{fire: 19000},
{ rock: 2100 },
{water: 1500}
]
1st array "cateogries or types"
const pokeTypes = [
{ uuid: 1, pokemonType: "fire" },
{ uuid: 2, pokemonType: "water" },
{ uuid: 3, pokemonType: "rock" }
];
2nd array pokemons
const pokemons = [
{
name: "geodude",
pokemonTypeId: 3,
power: 900,
},
{
name: "onix",
pokemonTypeId: 3,
power: 1200,
},
{
name: "squirtle",
pokemonTypeId: 2,
power: 100,
},
{
name: "seadra",
pokemonTypeId: 2,
power: 300,
},
{
name: "goldeen",
pokemonTypeId: 2,
power: 1100,
},
{
name: "charmander",
pokemonTypeId: 1,
power: 2000,
},
{
name: "charmeleon",
pokemonTypeId: 1,
power: 4000,
},
{
name: "charizard",
pokemonTypeId: 1,
power: 7000,
},
{
name: "magmar",
pokemonTypeId: 1,
power: 6000,
},
];
I started doing a reducer and was able to generate an array of objects grouped by pokemonTypeId, I couldn't continue after this...
I tried
function sortPokemons() {
result = pokemons.reduce(
(h, pokemons) =>
Object.assign(h, {
[pokemons.pokemonTypeId]: (h[pokemons.pokemonTypeId] || []).concat({
typeId: pokemons.pokemonTypeId,
}),
}),
{}
);
console.log(result);
}
console.log(sortPokemons());
thanks!
You can easily and efficiently achive the result using Map
const pokeTypes = [
{ uuid: 1, pokemonType: "fire" },
{ uuid: 2, pokemonType: "water" },
{ uuid: 3, pokemonType: "rock" },
];
const pokemons = [
{
name: "geodude",
pokemonTypeId: 3,
power: 900,
},
{
name: "onix",
pokemonTypeId: 3,
power: 1200,
},
{
name: "squirtle",
pokemonTypeId: 2,
power: 100,
},
{
name: "seadra",
pokemonTypeId: 2,
power: 300,
},
{
name: "goldeen",
pokemonTypeId: 2,
power: 1100,
},
{
name: "charmander",
pokemonTypeId: 1,
power: 2000,
},
{
name: "charmeleon",
pokemonTypeId: 1,
power: 4000,
},
{
name: "charizard",
pokemonTypeId: 1,
power: 7000,
},
{
name: "magmar",
pokemonTypeId: 1,
power: 6000,
},
];
const map = new Map();
pokemons.forEach((o) =>
map.has(o.pokemonTypeId)
? map.set(o.pokemonTypeId, map.get(o.pokemonTypeId) + o.power)
: map.set(o.pokemonTypeId, o.power)
);
const result = pokeTypes.map((o) => ({ [o.pokemonType]: map.get(o.uuid) }));
console.log(result);/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }Can be achieved using simple immutable programming: just use array methods map() and reduce().
const pokeTypes = [
{ uuid: 1, pokemonType: "fire" },
{ uuid: 2, pokemonType: "water" },
{ uuid: 3, pokemonType: "rock" },
];
const pokemons = [
{
name: "geodude",
pokemonTypeId: 3,
power: 900,
},
{
name: "onix",
pokemonTypeId: 3,
power: 1200,
},
{
name: "squirtle",
pokemonTypeId: 2,
power: 100,
},
{
name: "seadra",
pokemonTypeId: 2,
power: 300,
},
{
name: "goldeen",
pokemonTypeId: 2,
power: 1100,
},
{
name: "charmander",
pokemonTypeId: 1,
power: 2000,
},
{
name: "charmeleon",
pokemonTypeId: 1,
power: 4000,
},
{
name: "charizard",
pokemonTypeId: 1,
power: 7000,
},
{
name: "magmar",
pokemonTypeId: 1,
power: 6000,
},
];
const totals = pokeTypes.map(({uuid, pokemonType}) => {
const total = pokemons.reduce((acc, {power, pokemonTypeId}) =>
pokemonTypeId === uuid ? acc + power : acc
, 0);
return { [pokemonType] : total };
});
console.log(totals);And if you want to a nice clean object { fire: 19000, rock: 2100, water: 1500 }, which IMO is cleaner than array, replace the .map() with another .reduce():
const totals = pokeTypes.reduce((acc, {uuid, pokemonType}) => {
const total = pokemons.reduce((totalAcc, {power, pokemonTypeId})=>
pokemonTypeId === uuid ? totalAcc + power : totalAcc
, 0);
return {
...acc,
[pokemonType]: total,
}
}, {});
const pokeTypes = [
{ uuid: 1, pokemonType: "fire" },
{ uuid: 2, pokemonType: "water" },
{ uuid: 3, pokemonType: "rock" }
];
const pokemons = [
{
name: "geodude",
pokemonTypeId: 3,
power: 900,
},
{
name: "onix",
pokemonTypeId: 3,
power: 1200,
},
{
name: "squirtle",
pokemonTypeId: 2,
power: 100,
},
{
name: "seadra",
pokemonTypeId: 2,
power: 300,
},
{
name: "goldeen",
pokemonTypeId: 2,
power: 1100,
},
{
name: "charmander",
pokemonTypeId: 1,
power: 2000,
},
{
name: "charmeleon",
pokemonTypeId: 1,
power: 4000,
},
{
name: "charizard",
pokemonTypeId: 1,
power: 7000,
},
{
name: "magmar",
pokemonTypeId: 1,
power: 6000,
},
];
var data = pokeTypes.map(function(type) {
var res = {};
res[type.pokemonType] = pokemons.filter((item) => {
return item.pokemonTypeId === type.uuid;
}).reduce(function(sum, item) {
return sum + item.power;
}, 0);
return res;
});
console.log(data);