Merging Javascript arrays without concat

Tags: ,



I have two arrays that I need to combine. Most of the advice on combining arrays I can find use concat. But I don’t want to add to the end of an array, I need to add a key/value pair from array1 to each object in array2.

I need to merge this array1:

[
    "Basket Abandonment",
    "Downloads",
    "App Version"    
]

With this array2:

[
    {
        bottom: {
            comp : "",
            details, : "3.1.39 22nd Jul 2015",
            status : "",
            title : "Previous Version",
            value : "8.7%"
        },
        top: {
            details: "3.1.40 25th August 2015", 
            status: "", 
            comp: "", 
            title: "Latest Version", 
            value: "86%",
        }
    },
    {
        bottom: {
            value: "469", 
            title: "Total Reviews", 
            status: "neutral", 
            comp: "same", 
            details: "2 New This Week"
        },
        top:  {
            details: "Version 3.1.40", 
            status: "neutral", 
            comp: "same", 
            title: "Average Rating", 
            value: "4.0"
        }
    },  
    {
        bottom: {
            value: "469", 
            title: "Total Reviews", 
            status: "neutral", 
            comp: "same", 
            details: "2 New This Week"
        },
        top:  {
            details: "Version 3.1.40", 
            status: "neutral", 
            comp: "same", 
            title: "Average Rating", 
            value: "4.0"
        }
    }       
]

In a new combined array, I need to add a key of title to each object with the value from the first array so that the resulting array looks like this:

[
    {
        title: "Basket Abandonment",
        bottom: {
            comp : "",
            details, : "3.1.39 22nd Jul 2015",
            status : "",
            title : "Previous Version",
            value : "8.7%"
        },
        top: {
            details: "3.1.40 25th August 2015", 
            status: "", 
            comp: "", 
            title: "Latest Version", 
            value: "86%",
        }
    },
    {
        title: "Downloads",
        bottom: {
            value: "469", 
            title: "Total Reviews", 
            status: "neutral", 
            comp: "same", 
            details: "2 New This Week"
        },
        top:  {
            details: "Version 3.1.40", 
            status: "neutral", 
            comp: "same", 
            title: "Average Rating", 
            value: "4.0"
        }
    },  
    {
        title: "App Version",
        bottom: {
            value: "469", 
            title: "Total Reviews", 
            status: "neutral", 
            comp: "same", 
            details: "2 New This Week"
        },
        top:  {
            details: "Version 3.1.40", 
            status: "neutral", 
            comp: "same", 
            title: "Average Rating", 
            value: "4.0"
        }
    }       
]

Answer

You can do a simple for-loop in the second array inserting the new title property taken from the first one. But, if you want a function that gives you a new array without modifying the sources, then one solution is to make a new array mapping a clone of the objects in the second array with the strings in the first one, something like this:

const mixed = objects.map((obj, index) => (clone = {...obj}, clone.title = titles[index], clone));

Here you have an example using a function with your arrays:

const titles = [
  "Basket Abandonment",
  "Downloads",
  "App Version"
];

const objects = [
  {
    bottom: {
      comp: "",
      details : "3.1.39 22nd Jul 2015",
      status: "",
      title: "Previous Version",
      value: "8.7%"
    },
    top: {
      details: "3.1.40 25th August 2015",
      status: "",
      comp: "",
      title: "Latest Version",
      value: "86%",
    }
  },
  {
    bottom: {
      value: "469",
      title: "Total Reviews",
      status: "neutral",
      comp: "same",
      details: "2 New This Week"
    },
    top: {
      details: "Version 3.1.40",
      status: "neutral",
      comp: "same",
      title: "Average Rating",
      value: "4.0"
    }
  },
  {
    bottom: {
      value: "469",
      title: "Total Reviews",
      status: "neutral",
      comp: "same",
      details: "2 New This Week"
    },
    top: {
      details: "Version 3.1.40",
      status: "neutral",
      comp: "same",
      title: "Average Rating",
      value: "4.0"
    }
  }
];

const mix = (o, t) => o.map((m, i) => (c = {...m}, c.title = t[i], c));

const mixed = mix(objects, titles);

console.log(mixed);


Source: stackoverflow