Merge objects with the same key in 2 arrays into one array in Javascript/React

Question

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

Does this answer your question? [Merge two array of objects based on a key](https://stackoverflow.com/questions/46849286/merge-two-array-of-objects-based-on-a-key) — evolutionxbox, Feb 01 '22 at 08:51
_"I want to..."_ - And what have you tried so far to solve this on your own? A single `for` loop would already be enough (if the structure doesn't change) — Andreas, Feb 01 '22 at 08:52
@NinaScholz I was a bit quick. This is an issue of translation. Not really a programming issue. — evolutionxbox, Feb 01 '22 at 08:54
@Andreas here is what I tried https://codesandbox.io/s/restless-night-xq6qg?file=/src/App.js:667-984 — Ala Ben Aicha, Feb 01 '22 at 08:55
Then add it to your question... -> [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Andreas, Feb 01 '22 at 08:56

score 1 · Answer 1 · answered Feb 01 '22 at 09:01

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)

score 1 · Accepted Answer · answered Feb 01 '22 at 09:08

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; }

Merge objects with the same key in 2 arrays into one array in Javascript/React

2 Answers2