循环遍历缺少元素的数组

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 = {

    "content": [

      [

        "",

        "In scope:",

        "Not in scope:"

      ],

      [

        "Cars",

        "",

        "X"

      ],

      [

        "Bikes",

        "X",

        "",

        "extra data!"          // < will be removed 

      ],

      {

        "non number": "huh?",  // < will be removef

        "0": "Houses",         // will fill in index 1 with undefined

        "2": "X",

        

      }

    ]

  }

const enforceLength = (l, arr) => arr.map(arr => Array.from({length: l, ...arr}))

let l = o.content[0].length

o.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 in Object.assign(Array(+Object.keys(row).pop()+1).fill(""), row)

Answer 3

数据并不理想，因为对象属性不假定编号索引（如果其他数字被声明为键，则对象显然不会“填补空白”）。您可以映射到一个新数组，在 Vue 组件的计算属性中填充任何undefineds ：elem[1]

computed: {

  contentAsArrays() {

    return this.content.map(e => {

      if (e[1] === undefined) e[1] = "";

      return e;

    });

  },

},

并在您的模板中引用此计算属性：

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