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

【问题标题】：Convert Array of Object to Array and send it via Axios as parameter from a GET API将对象数组转换为数组并通过 Axios 作为 GET API 的参数发送
【发布时间】：2021-02-20 20:37:33
【问题描述】：

我有一个反应原生应用程序显示一些成分，用户可以选择其中一些来过滤一个特定的配方并查看所有详细信息，我的疑问是，如何将成分对象数组转换为“名称”并通过 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 没有任何更新？

【问题讨论】：

这能回答你的问题吗？ How to pass an array within a query string?
搜索类似array as query parameter

标签： javascript node.js react-native rest axios

【解决方案1】：

不确定我是否完全理解了这个问题，但也许你需要这样的东西？

    let params = []
    const array = [
    {
        "id": 8,
        "isSelected": true,
        "name": "leite condensado",
      },
    {
        "id": 9,
    "isSelected": true,
    "name": "creme de leite",
  },
]

array.map(item => params.push(item.name))
console.log(params)

https://codepen.io/pen/?editors=0011

结果将是["leite condensado", "creme de leite"]

基本上，您创建一个新数组，然后映射您拥有的结果并将您想要的值推送到这个新数组中，然后将其发送到您的 api

【讨论】：

【解决方案2】：

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

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

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

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);

【讨论】：

我本可以将 array.forEach 调用到 array.map 上，因为 map 返回一个数组。我没有将整个代码写在一个块中的原因是为了让 OP 更容易理解。 :)

【解决方案3】：

您可以将数组转换为名称数组，如下所示

const arr = [
   {
    "id": 8,
    "isSelected": true,
    "name": "leite condensado",
  },
  {
    "id": 9,
    "isSelected": true,
    "name": "creme de leite",
  },
]

const names = arr.map(obj => {
  return obj.name
})

console.log (names)

【讨论】：

【解决方案4】：

我和 up 有同样的问题，我想将 Axios 从 jsonplaceholder 接收到的 post 对象数组转换为“post ids”数组，并通过数组数据将其发送到 reducer.js。跟进解决方案后，我得到如下正确答案。

axios.get('http://jsonplaceholder.typicode.com/posts?_start=10&_limit=5')
  .then((res)=>{
    const data=res.data
    const ids = data.map(obj=>{
      return obj.id
    console.log('axios success:'+ids)
  })

控制台输出如下： axios 成功：11,12,13,14,15

【讨论】：