循环遍历缺少元素的数组

Question

我有一个包含一些表格数据的 JSON 提要，并且我正在使用 Vue.js 来显示一个 HTML 表格：

<tr v-for="row, index in content">

    <td class="index" v-text="index + 1"></td>

    <td v-for="column in row" v-text="column"></td>

</tr>

此提要为每一行返回一个数组，但有些行具有命名键。通过这个简单的 foreach 循环，它会忽略键，这将生成一个不能以正确方式显示数据的表。

如何使用密钥生成表？我已经研究过从键和使用中获得最高价值Array.fill()，但我认为必须有更好的方法。

这是我的数据：

{

  "content": [

    [

      "",

      "In scope:",

      "Not in scope:"

    ],

    [

      "Cars",

      "",

      "X"

    ],

    [

      "Bikes",

      "X",

      ""

    ],

    {

      "0": "Houses",

      "2": "X"

    }

  ]

}

请注意，这是虚构的数据，实际数据可能会有所不同，因此我无法找到具有固定列数的解决方案。

实际输出：

|        | In scope: | Not in scope: |

|--------|-----------|---------------|

| Cars   |           | X             |

| Bikes  | X         |               |

| Houses | X         |

预期输出：

|        | In scope: | Not in scope: |

|--------|-----------|---------------|

| Cars   |           | X             |

| Bikes  | X         |               |

| Houses |           | X             |

Answer 1

看起来您的第一行是标题行。如果您可以接受它作为以下项目长度的真实来源，您可以创建一个简单的函数来映射数组并强制所有项目的长度。这将标准化项目，使它们全部为数组，填充孔洞，删除超出长度的项目，并忽略对象上的非数字键：let o = {&nbsp; &nbsp; "content": [&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "",&nbsp; &nbsp; &nbsp; &nbsp; "In scope:",&nbsp; &nbsp; &nbsp; &nbsp; "Not in scope:"&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "Cars",&nbsp; &nbsp; &nbsp; &nbsp; "",&nbsp; &nbsp; &nbsp; &nbsp; "X"&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "Bikes",&nbsp; &nbsp; &nbsp; &nbsp; "X",&nbsp; &nbsp; &nbsp; &nbsp; "",&nbsp; &nbsp; &nbsp; &nbsp; "extra data!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // < will be removed&nbsp;&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "non number": "huh?",&nbsp; // < will be removef&nbsp; &nbsp; &nbsp; &nbsp; "0": "Houses",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// will fill in index 1 with undefined&nbsp; &nbsp; &nbsp; &nbsp; "2": "X",&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }const enforceLength = (l, arr) => arr.map(arr => Array.from({length: l, ...arr}))let l = o.content[0].lengtho.content = enforceLength(l, o.content)console.log(o.content)如果你把它放在组件的一个方法中，你可以简单地在模板中调用它，如下所示：<tr v-for="row, index in normalize(content)">

Answer 2

您的想法对Array#fill我来说似乎很好：您需要定义间隙的值（在您的情况下为空字符串）。但是由于您的非 Array 对象的索引似乎始终是数字，因此找到最大键要容易一些。尽管 ES6 规范没有定义Object.keys返回的顺序，但所有当前的 JS 引擎都按数字顺序生成键（当键表示 64 位范围内的正整数时），因此您可以从中弹出最后一个值：column&nbsp;in&nbsp;Object.assign(Array(+Object.keys(row).pop()+1).fill(""),&nbsp;row)

Answer 3

数据并不理想，因为对象属性不假定编号索引（如果其他数字被声明为键，则对象显然不会“填补空白”）。您可以映射到一个新数组，在 Vue 组件的计算属性中填充任何undefineds ：elem[1]computed: {&nbsp; contentAsArrays() {&nbsp; &nbsp; return this.content.map(e => {&nbsp; &nbsp; &nbsp; if (e[1] === undefined) e[1] = "";&nbsp; &nbsp; &nbsp; return e;&nbsp; &nbsp; });&nbsp; },},并在您的模板中引用此计算属性：<tr v-for="row, index in contentAsArrays">