Merging Javascript arrays without concat

Question

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"
        }
    }       
]

What is supposed to be the output? can you paste both array in the correct js format? — Luis felipe De jesus Munoz
– Luis felipe De jesus Munoz, Commented Apr 19, 2018 at 13:04
Fix the formatting, and remove everything but the bare minimum for the question to be understandable. We won't read through a wall of text. — Alex
– Alex, Commented Apr 19, 2018 at 13:16
I know, this is a brave question, but what have you tried so far? — Saffe
– Saffe, Commented Apr 19, 2018 at 13:25
Please format your arrays, it is impossible to understand. You can get help from there when you ask a question. — t13n
– t13n, Commented Apr 19, 2018 at 13:48
Sorry, I linked to here from another question elsewhere and forgot that more details were needed. I also fixed the formatting. — Mark Hayden
– Mark Hayden, Commented Apr 19, 2018 at 22:38

ElChiniNet · Accepted Answer · 2019-09-21 10:15:53Z

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

Collectives™ on Stack Overflow

Merging Javascript arrays without concat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related