admin管理员组文章数量:1357391
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())
))
);
本文标签： Merge arrays within an array using JavascriptVueJsStack Overflow
版权声明：本文标题：Merge arrays within an array using JavascriptVue.Js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744069047a2585548.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论