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

CodePudding user response：

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

CodePudding user response：

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)