CODEWITHSUNDEEP
javascriptarraysvue.jsvuejs2vue-component
Gracie
Gracie

Reputation: 956

Merge arrays within an array using Javascript/Vue.Js

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.

PREVIOUS

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

Upvotes: 0

Views: 21751

Answers (3)

chearmstrong
chearmstrong

Reputation: 332

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

Upvotes: 1

trh88
trh88

Reputation: 633

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

Upvotes: 0

Beginner
Beginner

Reputation: 9135

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)

Upvotes: 2

Related Questions