React - How to combine two api response together

Issue

I'm having a problem in combining these two different api responses.

const pastData = useSelector(
    (state) => state.transactions.pastData,
  );
const latestData = useSelector(
    (state) => state.transactions.latestData,
  );

pastData response shape: {loading: false, data: Array(3)}

latestData response shape: {loading: false, data: Array(6)}

I tried to combine them by using this:

const combinedResponse = {...pastData, ...latestData}

But when I logged combinedResponse it didn't work as expected.

Expected output is to merge data from responses just like this {loading: false, data: Array(9)}

Solution

Hey this is how you can merge both

const pastData = useSelector(
    (state) => state.transactions.pastData,
  );
const latestData = useSelector(
    (state) => state.transactions.latestData,
  );


const pastDataArr = pastData?.data ?? []

const latestDataArr = latestData?.data ?? []

const finalData = [...pastDataArr , ...latestDataArr];

const combinedResponse = {
loading:latestDataArr?.loading,
data:finalData
}

you can now use combinedResponse .

Answered By - Gaurav Roy