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:
<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"
}
]
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://arraydemolify.
<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 Commented Nov 14, 2018 at 9:44
- stackoverflow./questions/10865025/… – Martin Heralecký Commented Nov 14, 2018 at 9:45
-
Your example at arraydemolify. as the error
ReferenceError : arrays is not defined. – Dominique Fortin Commented Nov 14, 2018 at 9:49 - @DILEEPTHOMAS I have updated the question to reflect the desired JSON output – Gracie Commented Nov 14, 2018 at 10:36
3 Answers
Reset to default 2you 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)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()
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 plex), 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())
))
);