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?

score 2 · Answer 1 · answered Sep 14 '22 at 04:04

2

check this:

 const laSolucion = () => {
    const newStructure = [];
    data.forEach(element => {
        // firs capture the values element:
        const propertyValues = Object.values(element);
        // to save each future Stage
        const stageStructure = [];
        propertyValues.forEach(prop => {
            // check if is not the Stage: "string" value
            if( typeof prop === "object") stageStructure.push(prop);
        });
        // add the stage array structure in a array with field Stage
        newStructure.push({"Stage": stageStructure});
    });
    console.log(newStructure);
    return newStructure;
  }

answered Sep 14 '22 at 04:04

andres martinez

994
2
10
21

*'check this'* is not an answer, even if the code you included 'works'. Take the time to explain what you've done, how it addresses the OP's question, and any optimizations you've added. – pilchard Sep 14 '22 at 04:23
@pilchard, mmm the "explain part" is in the code :V – andres martinez Sep 14 '22 at 04:27

A1exandr Belan · Accepted Answer · 2022-09-14T04:36:05.660

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 }

I already added an answer with my suggestion, but that's fine I'll delete it. — pilchard, Sep 14 '22 at 04:38
Hmm now i can see true value of destructing using rest and spread. Thanks @A1exandrBelan — Alpesh Nakrani, Sep 14 '22 at 14:08
@AlpeshNakrani For example `data.forEach(({ Stage, ...rest }) => console.log(Stage, rest))` — A1exandr Belan, Sep 14 '22 at 14:34

A1exandr Belan · Answer 3 · 2022-09-14T05:29:10.160

As for your code, I tweaked it a bit and now it works as expected. You had issues with the array initialization.

But it's better to use .map instead of .forEach

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) });
  const newArr = [];

  data.forEach((stage, stageIdx) => {
   newArr.push({ Stage: [] });  // <<-- make new object for every item in array
    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;
};

console.log(stagesBackTransform(data));

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

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

Input:

Expected output:

What I've tried:

3 Answers3