CODEWITHSUNDEEP
javascriptnode.jsreact-nativerestaxios
Rudson Rodrigues
Rudson Rodrigues

Reputation: 345

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

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?

Upvotes: 0

Views: 3090

Answers (4)

Zelda
Zelda

Reputation: 1

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

Upvotes: 0

theonly1me
theonly1me

Reputation: 1248

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

Upvotes: 2

Ozgur Sar
Ozgur Sar

Reputation: 2204

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)

Upvotes: 1

Nick
Nick

Reputation: 14283

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

Upvotes: 1

Related Questions