Working on transforming array object data where it's taking same value for each indexes while converting it to other format

Question

I have an issue transforming array object data into required format. With my solution it's transforming it correctly but it's copying same last index data for each item in array.

Input:

let data = [
  {
    0: {
      value1: true,
      value2: false,
      isSelected: false,
    },
    1: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    2: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    3: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    4: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    Stage: 'A',
  },
  {
    0: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    1: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    2: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    3: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    4: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    Stage: 'B',
  },
  {
    0: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    1: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    2: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    3: {
      value1: false,
      value2: false,
      isSelected: false,
    },
    4: {
      value1: true,
      value2: true,
      isSelected: true,
    },
    Stage: 'C',
  },
];

Expected output:

// Expected output data
[
  {
    Stage: [
      {
        value1: true,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
    ],
  },
  {
    Stage: [
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
    ],
  },
  {
    Stage: [
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: false,
        value2: false,
        isSelected: false,
      },
      {
        value1: true,
        value2: true,
        isSelected: true,
      },
    ],
  },
];

What I've tried:

stagesBackTransform = (data) => {
  let newArr = new Array(data.length).fill({ Stage: new Array(16) });

  data.forEach((stage, stageIdx) => {
    Object.entries(stage).forEach((item, idx) => {
      if (item[0] !== 'Stage') {
        // newArr[stageIdx].Stage[item[0]] = item[1];
        newArr[stageIdx].Stage[idx] = item[1];
      }
    });
  });
  console.log('new:', newArr);
  return newArr;
};

let data = [
  {
    0: { value1: true, value2: false, isSelected: false },
    1: { value1: true, value2: true, isSelected: true },
    2: { value1: false, value2: false, isSelected: false },
    3: { value1: false, value2: false, isSelected: false },
    4: { value1: true, value2: true, isSelected: true },
    Stage: 'A',
  },
  {
    0: { value1: false, value2: false, isSelected: false },
    1: { value1: true, value2: true, isSelected: true },
    2: { value1: false, value2: false, isSelected: false },
    3: { value1: false, value2: false, isSelected: false },
    4: { value1: true, value2: true, isSelected: true },
    Stage: 'B',
  },
  {
    0: { value1: false, value2: false, isSelected: false },
    1: { value1: true, value2: true, isSelected: true },
    2: { value1: false, value2: false, isSelected: false },
    3: { value1: false, value2: false, isSelected: false },
    4: { value1: true, value2: true, isSelected: true },
    Stage: 'C',
  },
];

stagesBackTransform = (data) => {
  let newArr = new Array(data.length).fill({ Stage: new Array(16) });

  data.forEach((stage, stageIdx) => {
    Object.entries(stage).forEach((item, idx) => {
      if (item[0] !== 'Stage') {
        // newArr[stageIdx].Stage[item[0]] = item[1];
        newArr[stageIdx].Stage[idx] = item[1];
      }
    });
  });
  console.log('new:', newArr);
  return newArr;
};

const result = stagesBackTransform(data);

console.log(result);

It's giving me output in expected format but it's copying same item[1] which is object. It's copying last index object at all indexes in newly created arr. What mistake I'm doing here in my current code?

Answer 1

Actually you can use .map and destructuring to transform array

Live Demo:

let data = [{"0": {"value1": true,"value2": false,"isSelected": false},"1": {"value1": true,"value2": true,"isSelected": true},"2": {"value1": false,"value2": false,"isSelected": false},"3": {"value1": false,"value2": false,"isSelected": false},"4": {"value1": true,"value2": true,"isSelected": true},"Stage": "A"},{"0": {"value1": false,"value2": false,"isSelected": false},"1": {"value1": true,"value2": true,"isSelected": true},"2": {"value1": false,"value2": false,"isSelected": false},"3": {"value1": false,"value2": false,"isSelected": false},"4": {"value1": true,"value2": true,"isSelected": true},"Stage": "B"},{"0": {"value1": false,"value2": false,"isSelected": false},"1": {"value1": true,"value2": true,"isSelected": true},"2": {"value1": false,"value2": false,"isSelected": false},"3": {"value1": false,"value2": false,"isSelected": false},"4": {"value1": true,"value2": true,"isSelected": true},"Stage": "C"}];

const result = data.map(({ Stage, ...rest }) => ({ Stage: Object.values(rest) }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0 }