如何利用指定键数组从JSON提取值并在Vue表格中展示？

看起来你在提取JSON对象属性值和Vue表格渲染时遇到了问题，我来帮你一步步解决：

1. 修复键值提取的JavaScript代码 #

你原来的代码里有两个关键问题：

• 未定义的key变量：在find方法里用了a[key]，但key并没有被声明，应该用当前遍历的键名e
• 错误使用find方法：dtValue是包含单个对象的数组，我们不需要查找元素，而是直接访问这个对象的属性

修正后的代码如下：

let fdName =["SerialNo","denDate","denShift","denTime","denWs_1","denWs_2","denVol_1","denVol_2","denPwdrMix"];
let dtValue = [{ id: 1, SerialNo: 1, denDate: "2019-09-09", denShift: "Day", denTime: "10:32:00", denWs_1: 10.23, denWs_2: 11.2, denVol_1: 12.5, denVol_2: 10.12, denPwdrMix: 0.75, created_at: null, updated_at: null }];

// 直接遍历键名数组，提取对应对象的属性值
var savedData = fdName.map(key => dtValue[0][key]);
console.log(savedData); // 输出：[1, "2019-09-09", "Day", "10:32:00", 10.23, 11.2, 12.5, 10.12, 0.75]

这段代码通过map遍历fdName中的每个键名，直接从dtValue的第一个对象中取出对应属性值，完美得到你想要的结果。

2. 修正Vue表格的v-for渲染 #

你原来的v-for变量名有点混淆，而且:key的使用可以更清晰，修正后的表格代码如下：

<tbody>
  <tr>
    <!-- 用value表示每个单元格的值，index作为唯一key -->
    <td v-for="(value, index) in savedData" :key="index"> {{ value }} </td>
  </tr>
</tbody>

这样修改后，Vue会遍历savedData中的每个值，把它们依次渲染到<td>里，形成你期望的表格行。

扩展：如果dtValue有多个对象的情况 #

如果后续dtValue是包含多个对象的数组，你可以这样生成二维数据：

var savedData = dtValue.map(item => fdName.map(key => item[key]));

对应的表格渲染需要嵌套v-for：

<tbody>
  <tr v-for="(row, rowIndex) in savedData" :key="rowIndex">
    <td v-for="(value, colIndex) in row" :key="colIndex"> {{ value }} </td>
  </tr>
</tbody>

这样就能渲染出多行数据的表格了。

内容的提问来源于stack exchange，提问作者Frank Mochoge