时间戳

首页 > 解决方案 > 将对象数组转换为数组并通过 Axios 作为 GET API 的参数发送

javascript - 将对象数组转换为数组并通过 Axios 作为 GET API 的参数发送

问题描述

我有一个反应原生应用程序显示一些成分，用户可以选择其中一些来过滤一个特定的食谱并查看所有详细信息，我的疑问是，如何将成分对象数组转换为“名称”数组和通过 Axios 发送？

我从 API 接收的对象数组：

Array [
  Object {
    "id": 8,
    "isSelected": true,
    "name": "leite condensado",
  },
  Object {
    "id": 9,
    "isSelected": true,
    "name": "creme de leite",
  },
]

并且 API 期望类似

/report?name='suco de limão', 'bolacha'

因此，我只需要从名称 Key 中提取值作为 Array。

任何人都知道我是否可以在前面做它以保持 API 没有任何更新？

标签： javascriptnode.jsreact-nativerestaxios

解决方案

您可以使用 Array.prototype.map() 函数。Array.prototype.map() MDN 文档

这基本上是为每个元素调用当前数组上的回调 fn 并根据您在回调 fn 中编写的代码返回一个新数组。我在下面的代码中所做的只是从原始数组中检索每个对象的“名称”属性并将这些名称作为新数组返回。

然后遍历 names 数组并附加到您的 api URL。我在下面的代码片段中完成了这两件事，您可以尝试运行它以更好地理解它。

const arr = [
  {
    id: 8,
    isSelected: true,
    name: 'leite condensado',
  },
  {
    id: 9,
    isSelected: true,
    name: 'creme de leite',
  },
];
const nameArr = arr.map(obj => obj.name);
//logging names array to console
console.log(nameArr);

//appending names to your api url

let url = `/report?name=`;
nameArr.forEach((name, index, ar) => {
  index === ar.length - 1 ? (url += ` '${name}'`) : (url += ` 
'${name}', `);
});
//logging updated API URL to console
console.log(url);

推荐阅读