Convert Array of Object to Array and send it via Axios as parameter from a GET API

Question

I have one react native app the shows some ingredients and the user can select some of it to filter one specific recipe and see all the details, my doubt is, how can I convert the Array of ingredient objects to an Array of "names" and send it via Axios?

Array of objects I am receiving from the API:

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

and the API expect something like

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

So, I need to extract only the values from the name Key, as Array.

Anyone knows if I can do it in the front to keep the API without any update?

Does this answer your question? [How to pass an array within a query string?](https://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string) — Heartbit, Nov 08 '20 at 20:59

Link · Accepted Answer · 2020-11-08T21:19:00.693

You can use the Array.prototype.map() function. Array.prototype.map( ) MDN Documentation

What this does is basically for each element call a callback fn on your current array and returns a new array as per the code you write in the callback fn. What I've done in the below code is to just retrieve the 'name' property of each object from the original array and return those names as a new array.

Then loop over the names array and append to your api URL. I have done both these things in the below code snippet, you can try and run it to understand it better.

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

I could have just called array.forEach onto the array.map because map returns an array. The reason I didn’t write the entire code in one block is so that it would be easier to understand for OP. :) — Link, Nov 08 '20 at 22:43

score 1 · Answer 2 · answered Nov 08 '20 at 21:02

Not sure if I understood the question completely, but maybe you need something like this?

    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

The result would be ["leite condensado", "creme de leite"]

basically, you create a new array, then you map the results you have and push the value you want into this new array and you send it to your api

score 1 · Answer 3 · answered Nov 08 '20 at 21:04

You can convert the array to an array of names as this

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)

score 0 · Answer 4 · answered Dec 17 '20 at 19:58

I have the same problem as up,I want to convert the Array of post objects received from jsonplaceholder by Axios to an Array of "post ids" and send it by array data to the reducer.js. After follow up solution, I get the correct answer as below.

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

Console output as below: axios success:11,12,13,14,15

Convert Array of Object to Array and send it via Axios as parameter from a GET API

4 Answers4