How can i convert this type of api response to array of objects. in reactjs

Question

So this is the api response i'am getting.

[
    {
        "Declaration":[
            {
                "id":111,
                "emp_name":"john",
                "pan":"QWHTERT",
                "desigination":"SDE",
                "house_loan":0,
                "car_loan":0
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":112,
                "emp_name":"emy",
                "pan":"QWHHGTRT",
                "desigination":"HR",
                "house_loan":10000,
                "car_loan":2000
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":114,
                "emp_name":"diya",
                "pan":"QWHHGTRT",
                "desigination":"PM",
                "house_loan":30000,
                "car_loan":6000
            }
        ],
        "Rent":[]
    },
    {
        "Declaration":[
            {
                "id":115,
                "emp_name":"ringu",
                "pan":"AWSDWHHGTRT",
                "desigination":"TL",
                "house_loan":90000,
                "car_loan":7000
            }
        ],
        "Rent":[
            {
                "house_rent":12000,
                "gym_rent":1500
            }
        ]
    },
    {
        "Declaration":[
            {
                "id":116,
                "emp_name":"jincy",
                "pan":"LPOWHHGTRT",
                "desigination":"SDE 2",
                "house_loan":80000,
                "car_loan":4000
            }
        ],
        "Rent":[]
    }
]

i need to convert this response into single array of objects. where Rent array should merge with declaration array. and it should be a single array of object with all the data of rent and declaration. the desired out should look like shown below.

{
    declaration:[
        {
            "id":115,
            "emp_name":"ringu",
            "pan":"AWSDWHHGTRT",
            "desigination":"TL",
            "house_loan":90000,
            "car_loan":7000,
            "house_rent":12000,
            "gym_rent":1500
        },
        {
            "id":111,
            "emp_name":"john",
            "pan":"QWHTERT",
            "desigination":"SDE",
            "house_loan":0,
            "car_loan":0,
            "house_rent":12000,
            "gym_rent":1500
        },
        {
            "id":112,
                "emp_name":"emy",
                "pan":"QWHHGTRT",
                "desigination":"HR",
                "house_loan":10000,
                "car_loan":2000,
                "house_rent":12000,
                "gym_rent":1500
        }
    ]
}

So it will be easy to list these inside a grid.

I have tried my level best. attaching the code that i have tried that didn't work

class App extends React.Component{
  constructor() {
    super();
    this.state({
      userDetails:[]
    })
  
  }
  componentDidMount(){
    renderData();
  }
  renderData(){
    instance
    .get("/rentdeails/user")
    .then((res)=>{
      const declarationDetails = [];
      const rentDetails = [];

      for(let key in res.data){
        declarationDetails = res.data[key].Declaration
        rentDetails = res.data[key].Rent
      }

      const mergedArray = [...declarationDetails, ...rentDetails];

      this.setState({userDetails:mergedArray});
      console.log(mergedArray);
    })
  }

Feel free to ask any queries. Any help will be appreciated.

Note that this isn't a React or React hooks question, it's just JS. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Dec 13, 2022 at 18:27

KcH · Accepted Answer · 2022-12-13 17:59:01Z

1

you can use Array map method ...

Note: This e.g. considers that there would be only one element inside Declaration and Rent

const data = [
  {
    Declaration: [
      {
        id: 111,
        emp_name: "john",
        pan: "QWHTERT",
        desigination: "SDE",
        house_loan: 0,
        car_loan: 0,
      },
    ],
    Rent: [
      {
        house_rent: 12000,
        gym_rent: 1500,
      },
    ],
  },
  {
    Declaration: [
      {
        id: 112,
        emp_name: "emy",
        pan: "QWHHGTRT",
        desigination: "HR",
        house_loan: 10000,
        car_loan: 2000,
      },
    ],
    Rent: [
      {
        house_rent: 12000,
        gym_rent: 1500,
      },
    ],
  },
  {
    Declaration: [
      {
        id: 114,
        emp_name: "diya",
        pan: "QWHHGTRT",
        desigination: "PM",
        house_loan: 30000,
        car_loan: 6000,
      },
    ],
    Rent: [],
  },
  {
    Declaration: [
      {
        id: 115,
        emp_name: "ringu",
        pan: "AWSDWHHGTRT",
        desigination: "TL",
        house_loan: 90000,
        car_loan: 7000,
      },
    ],
    Rent: [
      {
        house_rent: 12000,
        gym_rent: 1500,
      },
    ],
  },
  {
    Declaration: [
      {
        id: 116,
        emp_name: "jincy",
        pan: "LPOWHHGTRT",
        desigination: "SDE 2",
        house_loan: 80000,
        car_loan: 4000,
      },
    ],
    Rent: [],
  },
];

const res = {
  declaration: data.map((el) => {
    return { ...el.Declaration[0], ...el.Rent[0] };  // as mentioned in note
  }),
};

console.log(res);

answered Dec 13, 2022 at 17:59

KcH

3,5224 gold badges28 silver badges61 bronze badges

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

2 Comments

Anandhu A Over a year ago

This works perfectly, Thanks. But i have another doubt, for eg: if we have same feilds inside rent array like two gym_rents, When we map it we only get one gym_rent feild and it's data. what will we do if we want both the same feild gym_rents have to come in side declaration. NB: in above code we have only one gym_rent. assume we have 2 gym_rents inside rent array.

KcH Over a year ago

I get you, give me sometime will update the solution on my free time ... I have added a note for the same reason...

Collectives™ on Stack Overflow

How can i convert this type of api response to array of objects. in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related