如何构造关联数组以注入"dom-repeat" [英] How to Structure Associative Array to Inject into `dom-repeat`

问题描述

我有一个要在dom-repeat中使用的数组数组，但是却收到一条错误消息，提示数据不像数组.

I have an array of arrays that I would like to use in a dom-repeat, but am getting an error saying the data isn't array-like.

dom-repeat.html:465 items的dom-repeat预期数组，找到{0:Array(1)，1:Array(1)，2:Array(13)...

dom-repeat.html:465 dom-repeat expected array for items, found {0: Array(1), 1: Array(1), 2: Array(13)...

订单行项目中的原始数据，并被转换为数组数据数组以分类为卡片.我认为理想的模式应该是:

The original data in order line items and is being converted into the array of arrays data to sort into cards. I think ideally the pattern would be something like:

父母卡

<template is="dom-repeat" items="[[data]" index-as="index">
  <card-item-group data="[[item]]"></card-item-group> -->
</template>

纸牌儿童

<template is="dom-repeat" items="[[data]" index-as="index">
  <card-items data="[[item]]"></card-items> -->
</template>

我走错路了吗?

我可以通过其他方式将订单项合并到卡片中吗?

Can I merge the line items into cards some other way?

原始数据集:

[{
  "0": {
    "time": "2018-02-20",
    "description": "Item 1",
    "number": "1193312"
  },
  "1": {
    "time": "2018-02-21",
    "itemDesc": "Item 2",
    "number": "1193314"
  },
  "2": {
    "time": "2018-02-21",
    "description": "Item 3",
    "number": "1193314"
}

分组数据集:

[{
  "0":[
   {
      "time": "2018-02-20",
      "description": "Item 1",
      "number": "1193312"
    }
  ],
  "1":[
    {
      "time": "2018-02-21",
      "itemDesc": "Item 2",
      "number": "1193314"
    },{
      "time": "2018-02-21",
      "description": "Item 3",
      "number": "1193314"
    }
  ]
}]

推荐答案

您的数据不是数组.

对其进行一些转换，如下所示:

Do some transform on it like so:

original.map((item) =>
    Object.keys(item).map((key) => item[key]));

这将导致:

[
    [
        {
            "time": "2018-02-20",
            "description": "Item 1",
            "number": "1193312"
        },
        {
            "time": "2018-02-21",
            "itemDesc": "Item 2",
            "number": "1193314"
        },
        {
            "time": "2018-02-21",
            "description": "Item 3",
            "number": "1193314"
        }
    ]
]

然后进行分组...

这篇关于如何构造关联数组以注入"dom-repeat"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！