splice objects from arrays into new array

Question

I have two arrays of objects which I would like to combine into a new array, splicing each object from one array into another based on the previewNumber value as the index used in .splice. I've used .map but it only loops for the length of arrayOne, below is some example code, any help would be greatly appreciated

const arrayOne = [
  {
    "title": "A Project",
    "slug": "a-project",
    "previewNumber": 2,
  },
  {
    "title": "New Project",
    "slug": "new-project",
    "previewNumber": 4,
  }
]

const arrayTwo = [
  {
    "title": "Project 5546",
    "slug": "project-5546",
  },
  {
    "title": "Project 456",
    "slug": "project-456",
  },
    {
    "title": "Rand Project 467",
    "slug": "rand-project-467",
  },
  {
    "title": "Random Project 245",
    "slug": "random-project-245",
  },
    {
    "title": "Example Project",
    "slug": "example-project",
  },
]


  const newArray = arrayOne.map((item) =>
    arrayTwo.splice(item.previewNumber, 0, item)
  );
  
  console.log(newArray)
  
  const desiredOutput = [
  {
    "title": "Project 5546",
    "slug": "project-5546",
  },
  {
    "title": "Project 456",
    "slug": "project-456",
  },
    {
    "title": "A Project",
    "slug": "a-project",
    "previewNumber": 2,
  },
    {
    "title": "Rand Project 467",
    "slug": "rand-project-467",
  },
  {
    "title": "Random Project 245",
    "slug": "random-project-245",
  },
    {
    "title": "New Project",
    "slug": "new-project",
    "previewNumber": 4,
  },
    {
    "title": "Example Project",
    "slug": "example-project",
  },
]

Answer 1

First, make the newArray copy of arrayTwo. After that, you could iterate through arrayOne add into newArray by splicing from previewNumber + index

const newArray = [...arrayTwo]
arrayOne.forEach((el, index) => {
  newArray.splice(el.previewNumber + index, 0, el)
})

console.log(newArray)

Full demo

const arrayOne = [
  {
    title: "A Project",
    slug: "a-project",
    previewNumber: 2,
  },
  {
    title: "New Project",
    slug: "new-project",
    previewNumber: 4,
  },
]

const arrayTwo = [
  {
    title: "Project 5546",
    slug: "project-5546",
  },
  {
    title: "Project 456",
    slug: "project-456",
  },
  {
    title: "Rand Project 467",
    slug: "rand-project-467",
  },
  {
    title: "Random Project 245",
    slug: "random-project-245",
  },
  {
    title: "Example Project",
    slug: "example-project",
  },
]

const newArray = [...arrayTwo]
arrayOne.forEach((el, index) => {
  newArray.splice(el.previewNumber + index, 0, el)
})

console.log(newArray)

Answer 2

You can achieve this using flatMap. Here is an implementattion.

const arrayOne = [ { "title": "A Project", "slug": "a-project", "previewNumber": 2, }, { "title": "New Project", "slug": "new-project", "previewNumber": 4, }];

const arrayTwo = [ { "title": "Project 5546", "slug": "project-5546", }, { "title": "Project 456", "slug": "project-456", }, { "title": "Rand Project 467", "slug": "rand-project-467", }, { "title": "Random Project 245", "slug": "random-project-245", }, { "title": "Example Project", "slug": "example-project", }];

const result = arrayTwo.flatMap((p,i)=>{
   position = arrayOne.find(k=>k.previewNumber===i);
   return position ? [position, p] : p
});

console.log(result);

Or you can convert the arrayOne to objects. Something like this:

const arrayOne = [ { "title": "A Project", "slug": "a-project", "previewNumber": 2, }, { "title": "New Project", "slug": "new-project", "previewNumber": 4, }];

const mapped = Object.fromEntries(arrayOne.map(p=>[p.previewNumber,p]));

const arrayTwo = [ { "title": "Project 5546", "slug": "project-5546", }, { "title": "Project 456", "slug": "project-456", }, { "title": "Rand Project 467", "slug": "rand-project-467", }, { "title": "Random Project 245", "slug": "random-project-245", }, { "title": "Example Project", "slug": "example-project", }];

const result = arrayTwo.flatMap((p,i)=>mapped[i] ? [mapped[i], p] : p);

console.log(result);