I am faced with a JSON array containing 3 arrays that I need to merge into one array after fetching the JSON data. Although I attempted to do so using Vue.JS, the resulting array appears to be empty.
MY FIRST ATTEMPT
this.items = items;
MY LATEST ATTEMPT
this.items = items.concat.apply([], arrays);
I have provided a 3-page demo example in 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"
}
]
]
EXPECTED JSON OUTPUT
JSON
[
{
"page1": "Company Name"
},
{
"products": "Product List"
},
{
"contactus": "Contact Us at Acme Corp"
}
]