Merge arrays within an array using Javascript/Vue.Js

Question

I have a fixed JSON array that contains 3 arrays. After the JSON has been fetched I am trying to merge them into one array. Here is what I have attempted but the Vue.JS array seems empty.

this.items = items;

NEW ATTEMPT

this.items = items.concat.apply([], arrays);

I have put an example of the 3 page demo at the link below:

https://arraydemo.netlify.com

<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
    <h1 class="display-4">Vue Page Output:</h1>
    <!--<h2>{{items[0][0].page1}}</h2>-->
    <h2>{{items.page1}}</h2>
</div>
<div class="container text-center mt-5">
    <h3>Other Pages</h3>
    <a href="products.html">Products</a>
    <a href="contactus.html">Contact Us</a>
</div>
<!-- /.container -->

<script type="text/javascript">
    const app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created: function () {
        fetch('test.json')
        .then(resp => resp.json())
        .then(items => {
            this.items = items.concat.apply([], arrays);
        })
    }
    });
</script>
</body>

JSON

[
    [
    {
        "page1": "Company Name"
    }
    ],
    [
    {
        "products": "Product List"
    }
    ],
    [
    {
        "contactus": "Contact Us at Acme Corp"
    }
    ]
]

DESIRED JSON OUTPUT

JSON

[
    {
        "page1": "Company Name"
    },
    {
        "products": "Product List"
    },
    {
        "contactus": "Contact Us at Acme Corp"
    }
]

so you need to merge the sub arrays into a single array, can you post your desired output array should be ? — Learner, Nov 14 '18 at 09:44
https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript — Martin Heralecký, Nov 14 '18 at 09:45
Your example at [arraydemo.netlify.com](https://arraydemo.netlify.com) as the error `ReferenceError : arrays is not defined`. — Dominique Fortin, Nov 14 '18 at 09:49
@DILEEPTHOMAS I have updated the question to reflect the desired JSON output — Gracie, Nov 14 '18 at 10:36

score 2 · Accepted Answer · answered Nov 14 '18 at 09:54

2

you can iterate through each object where each object is an array, loop through the nested array and push the objects to a new array.

I hope this will solve your issue

var arr = [
    [
    {
        "page1": "Company Name"
    }
    ],
    [
    {
        "products": "Product List"
    }
    ],
    [
    {
        "contactus": "Contact Us at Acme Corp"
    }
    ]
]

// normal way
var mergedArrNormalWay = [];

arr.forEach(o => {
 o.forEach(so => mergedArrNormalWay.push(so))
})


// using concat

var merged = [].concat.apply([], arr);


console.log("merged in  a normal iteration way using for each", mergedArrNormalWay);

console.log("reduced way", merged)

answered Nov 14 '18 at 09:54

Learner

8,379
7
44
82

Would I just apply ```[].concat.apply([], arr);``` to the end of ```this.items =```? I have updated the desired JSON which is slightly different from above – Gracie Nov 14 '18 at 10:40
in order to understand purpose only i have used the forEach method , you can use the concat method, i hope it should work . Please let me know if any issues are you facing :) – Learner Nov 14 '18 at 11:12
Hi Dileep, This is just what I need. Just having trouble integrating it into my Vue.JS footer code... https://pastebin.com/wxfFwwMy – Gracie Nov 14 '18 at 14:30
so can you brief whats the issue you are getting ? – Learner Nov 15 '18 at 05:43

score 1 · Answer 2 · answered Jun 19 '20 at 15:11

1

Given your JSON example above, and the desired output, calling .flat() on your outer array should work for you.

someArray.flat()

MSDN - Array.prototype.flat()

answered Jun 19 '20 at 15:11

chearmstrong

332
2
11

The `flat` method is exactly what should be used in this case. The only left behind browser is *IE* but IE is clearly no more part of the browsers you should support. – gabrielstuff Sep 01 '20 at 23:03

score 0 · Answer 3 · answered Nov 14 '18 at 10:04

0

Your question isn't clear whether you want to end up with an array of objects, or an array of arrays. I've assumed you want an array of arrays (as this is slightly more complex), but you could simplify the below (specifically the Object.entries) if you require an array of objects:

merged = [];

items.map(
  item => item.forEach(inner => (
    merged.push(Object.entries(inner).flat())
  ))
);

answered Nov 14 '18 at 10:04

trh88

612
8
22

Thanks trh88 - I have updated the desired JSON output in the question - Would the above code be entered into the created method below ```.then(items => {``` – Gracie Nov 14 '18 at 10:36

Merge arrays within an array using Javascript/Vue.Js

3 Answers3