使用 Javascript/Vue.Js 合并数组中的数组

Question

我有一个包含 3 个数组的固定 JSON 数组。获取 JSON 后，我试图将它们合并到一个数组中。这是我尝试过的，但 Vue.JS 数组似乎是空的。

以前的

this.items = items;

新尝试

this.items = items.concat.apply([], arrays);

我在下面的链接中放了一个 3 页演示的示例：

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

所需的 JSON 输出

JSON

[
    {
        "page1": "Company Name"
    },
    {
        "products": "Product List"
    },
    {
        "contactus": "Contact Us at Acme Corp"
    }
]

Answer 1

您可以遍历每个对象，其中每个对象都是一个数组，循环遍历嵌套数组并将对象推送到一个新数组。

希望能解决你的问题

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)

Answer 2

鉴于您上面的 JSON 示例和所需的输出，在您的外部数组上调用 .flat() 应该适合您。

someArray.flat()

MSDN - Array.prototype.flat()

Answer 3

您的问题不清楚是要以对象数组还是数组数组结尾。我假设您需要一个数组数组（因为这稍微复杂一些），但如果您需要一个对象数组，您可以简化以下内容（特别是 Object.entries）：

merged = [];

items.map(
  item => item.forEach(inner => (
    merged.push(Object.entries(inner).flat())
  ))
);