使用 AXIOS 和 VueJs 用二维数组映射数据

Posted 2023-02-23

【中文标题】使用 AXIOS 和 VueJs 用二维数组映射数据

【英文标题】：Mapping data with 2 dimensional array with AXIOS and VueJs

【发布时间】：2020-10-09 13:01:14

【问题描述】：

我是vuejs 的初学者，我想将我的数据响应映射到一个二维表中。

这是我的数据：

[
  "origine": "",
  "nb": 15
, 
  "origine": "?",
  "nb": 18
, 
  "origine": "?L",
  "nb": 1
, 
  "origine": "G",
  "nb": 298
, 
  "origine": "I",
  "nb": 51
, 
  "origine": "L",
  "nb": 1735
, 
  "origine": "L?",
  "nb": 1
, 
  "origine": "O",
  "nb": 4
]

映射后我希望数据是这样的：

[
  ['', 15],
  ['?', 18],
  ['?L', 1],
  ['G', 298],
  ['I', 51],
  ['L', 1735],
  ['L?', 1],
  ['O', 4]
]

或者像这样：

[
  '': 15,
  '?': 18,
  '?L': 1, 
  'G': 298, 
  'I': 51, 
  'L': 1735, 
  'L?': 1, 
  'O': 4
]

到目前为止，我已经写了这个：

getResultcivitas(localisation) 
  axios
    .get('../api/civitasorigine/' + this.searchInputcivitas)
    .then(response => this.origines = response.data.map (x => x.origine))

我找到了这个，但我不知道如何在我的 axios 查询中拼出它。

map = origines.map(obj => 
  var rObj = ;
  rObj[obj.origine] = obj.nb;
  return rObj;
);

【参考方案1】：

只需使用 item.origine 和 item.nb 从 map 函数的回调中返回一个数组

let data = [
  "origine": "",
  "nb": 15
, 
  "origine": "?",
  "nb": 18
, 
  "origine": "?L",
  "nb": 1
, 
  "origine": "G",
  "nb": 298
, 
  "origine": "I",
  "nb": 51
, 
  "origine": "L",
  "nb": 1735
, 
  "origine": "L?",
  "nb": 1
, 
  "origine": "O",
  "nb": 4
]

let mappedData = data.map(item => 
  return [item.origine, item.nb];
)

console.log(mappedData)

【讨论】：

我已经就这个主题制定了关于 VueJs 中的对象的第二个问题。你能帮我吗***.com/questions/62531807/…

【参考方案2】：

嗯，你确实有所有的答案，你只需要把它们结合起来：

axios
  .get('../api/civitasorigine/' + this.searchInputcivitas)
  .then(response => 
    this.origines = response.data.map(obj => 
      const rObj = ;
      rObj[obj.origine] = obj.nb;
      return rObj;
    )
  )