How to Pass properties from array of objects to api request

Question

I have an array of objects. I want to pick few values from my array of objects and send it in my request params on for my api that i am calling on componentDidMount. My Array-

const myArray = [
  {
    id:'73',
    name:'ABC',
    age: '20',
  },
  {
    id:'74',
    name:'XYZ',
    age: '21',
  },
  {
    id:'75',
    name:'PQR',
    age: '22',
  },
  {
    id:'76',
    name:'TUV',
    age: '23',
  }
] 


useEffect(
    () => {
      const newData = myArray.map(list => {
      // Logic to add few more keys to existing array
      return newData; // new array with few additional properties
      });

      let data= newData.map(({name, age}) => ({name,age}));
      const reqParams = {
        userData: {
          data: [
            {
              data,
            },
          ],
        },
      };
      getUserData(reqParams); // API call
    [],
  );

To get values, I am doing like this-

let result = myArray.map(({name, age}) => name,age)

This will return me an array so, I am not sure if this is the right way to do it. trying to understand how can i pass the values to my request params.

Can you show us the logic you used to add more keys to the newData arrray? — Nida Munir
– Nida Munir, Commented May 24, 2020 at 16:39

Ravi Roshan · Accepted Answer · 2020-05-25 01:05:43Z

1

Here is the sample code to achieve the desired output in a single loop 🚀

const myArray = [{
    id: '73',
    name: 'ABC',
    age: '20',
}, {
    id: '74',
    name: 'XYZ',
    age: '21',
}, {
    id: '75',
    name: 'PQR',
    age: '22',
}, {
    id: '76',
    name: 'TUV',
    age: '23',
}]


const newArr = myArray.map((d,index) => {
    // return new obj structure with subset of myArray and extra values
    
    const extraData = {
        company: 'foo', // adding company & city [read/get it from anywhere]
        city:'bar',
        sampleIndex: index+1
    }

    const newObj = {
        name: d.name, // not adding id, age
        ...extraData
    }

    return newObj
})

console.log("newArr ", newArr)

const reqParams = {
  userData: {
    data: newArr
  },
};

console.log("reqParams ", reqParams)

answered May 25, 2020 at 1:05

Ravi Roshan

1,2072 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Józef Podlecki · Accepted Answer · 2020-05-24 12:18:08Z

0

You can create new object in map callback by wrapping it in ({}) braces

let data= myArray.map(({name, age}) => ({name,age}));

const reqParams = {
        userData: {
          data
        },
      };

answered May 24, 2020 at 12:18

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

1 Comment

techie_questie Over a year ago

I have updated my Question above. I am handling like you have suggested but i think probably i am doing some mistake in using map method. My newData gives me an array with all values as undefined and hence, i am not able to see name and age in my request params.

Vishal Sharma · Accepted Answer · 2020-05-24 13:05:21Z

0

Please try to write the newData calculation as follows if not already:

const newData = myArray.map(list => {
  return {
    ...list,
    key: value // additional property
  }
});

answered May 24, 2020 at 13:05

Vishal Sharma

3461 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to Pass properties from array of objects to api request

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest