I have two arrays of objects that I want to merge into a single array and merge their objects too.
The two arrays:
const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];
The result that I want:
items = [
{
title: {
fr: "Bonjour",
en: "Good Morning"
}
},
{
title: {
fr: "Bonne Nuit",
en: "Good Night"
}
}
];
Here is what I tried:
export default function App() {
const [items, setItems] = useState([]);
const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];
const fillItemsFrArray = () =>
itemsFr.map((item) => {
setItems(...items, {
title: {
fr: item.title
}
});
});
const fillItemsEnArray = () =>
itemsEn.map((item) => {
setItems(...items, {
title: {
en: item.title
}
});
});
useEffect(() => {
fillItemsFrArray();
fillItemsEnArray();
}, []);
return (
<div className="App">
<h2>{JSON.stringify(items, null, 4)}</h2>
</div>
);
}
Here is the CodeSandbox link: https://codesandbox.io/s/restless-night-xq6qg?file=/src/App.js:670-1166
Will this work?
const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
},
{
title: "bla bla"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];
const items = itemsFr.map((i,c) => ({fr:i.title, en:itemsEn[c]?.title}));
console.log(items)You could take a dynamic approach by using an object with wanted keys fro the final result.
const
itemsFr = [{ title: "Bonjour" }, { title: "Bonne Nuit" }],
itemsEn = [{ title: "Good Morning" }, { title: "Good Night" }],
result = Object
.entries({ fr: itemsFr, en: itemsEn })
.reduce((r, [key, a]) => a.map(({ title }, i) => ({
title: { ...r[i]?.title, [key]: title }
})), []);
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }