使用来自另一个包含键的数组中的值过滤 json 响应答案

【问题标题】：Filter json response using values from another array containing keys使用来自另一个包含键的数组中的值过滤 json 响应
【发布时间】：2020-01-11 02:15:19
【问题描述】：

我正在尝试使用包含在不同数组中的键值从 JSON 响应中获取值。我的代码如下，但是当我尝试记录结果时我变得不确定。

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(function(e) {
    var filteredRes = dtValue.find(a => a[key] == e);
return filteredRes ;});

console.log(savedData);

预期结果：[1, 2019-09-09, Day, 10:32:00, 10:23, 11.2, 12.5, 10.12, 0.75];

我想使用v-for在表格中显示获得的结果，如下所示

<tbody>
 <tr>
  <td
    v-for="(dtValue, sdtValue ) in savedData "
     :key="sdtValue"
      >     
       {{dtValue}}
 </td>
  </tr>
 </tbody>

【问题讨论】：

为什么dtValue 需要是一个数组？还有dtValue.find(a => a[key] == e);中的key是什么？
@CuongLeNgoc，我试图传递一个键值来等同于 fdName 数组中的映射值。非常感谢您就如何最好地实现这一目标提供一些指导。
如果dtValue 有多个元素，预期的输出是什么？
我最初的意图是遍历值并直接在 DOM 中显示它们，这样我将直接将值绑定到匹配的键，但不幸的是，这样做时我得到了一个列一排。我的实现是<td v-for="(dtValue, sdtValue ) in savedFormValues" :key="sdtValue" > <div v-for="(th_title, dth_title) in tbData" :key="dth_title"> {{dtValue[th_title]}} </div></td>
这样我可以控制多个元素。但是根据您的评论，我认为如果返回的数组以这种方式嵌套最好，我可以循环。

标签： javascript arrays json vue.js

【解决方案1】：

如果你想基于fdName进行映射，你需要2个循环来渲染结果。

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 = dtValue.map((e) => fdName.map(key => e[key]));

console.log(savedData);

那么表格将是：

<tbody>
  <tr v-for="data in savedData">
    <td v-for="value in data">     
      {{value}}
    </td>
  </tr>
</tbody>

您可以在没有地图的情况下进行渲染，然后只需要一个循环，但需要列出所有字段。示例：

<tbody>
  <tr v-for="data in dtValue">
    <td>{{data[key1]}}</td>
    <td>{{data[key2]}}</td>
    <td>{{data[key3]}}</td>
    <td>{{data[key4]}}</td>
    <td>{{data[key5]}}</td>
  </tr>
</tbody>

【讨论】：

感谢@Cuong 我已经使用了这种<tbody> <tr v-for="data in savedData"> <td v-for="value in data"> {{value}} </td> </tr> </tbody> 方法。它运作良好。
计算后。