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 ? — Beginner
– Beginner, Commented Nov 14, 2018 at 9:44
Your example at arraydemo.netlify.com as the error ReferenceError : arrays is not defined. — Dominique Fortin
– Dominique Fortin, Commented Nov 14, 2018 at 9:49
@DILEEPTHOMAS I have updated the question to reflect the desired JSON output — Gracie
– Gracie, Commented Nov 14, 2018 at 10:36

Beginner · Accepted Answer · 2018-11-14 09:54:46Z

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, 2018 at 9:54

Beginner

9,20011 gold badges50 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gracie Over a year ago

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

Beginner Over a year ago

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

Gracie Over a year ago

Hi Dileep, This is just what I need. Just having trouble integrating it into my Vue.JS footer code... pastebin.com/wxfFwwMy

Beginner Over a year ago

so can you brief whats the issue you are getting ?

chearmstrong · Accepted Answer · 2020-06-19 15:11:05Z

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, 2020 at 15:11

chearmstrong

3322 silver badges11 bronze badges

1 Comment

gabrielstuff Over a year ago

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.

trh88 · Accepted Answer · 2018-11-14 10:04:44Z

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, 2018 at 10:04

trh88

6431 gold badge9 silver badges22 bronze badges

1 Comment

Gracie Over a year ago

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 => {

Collectives™ on Stack Overflow

Merge arrays within an array using Javascript/Vue.Js

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related