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

Question

我有一个反应本机应用程序显示一些成分，用户可以选择其中一些成分来过滤一个特定的配方并查看所有详细信息，我的疑问是，如何将成分对象数组转换为“名称”数组并通过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 中提取值，作为数组。有人知道我是否可以在前面做到这一点以保留 API 而不进行任何更新？

Answer 1

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

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

然后循环名称数组并附加到您的 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);

Answer 2

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

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)

Answer 3

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

    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

Answer 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 success:11,12,13,14,15