Javascript: Changing the nested data structure

Question

I want to change a nested array, object to another structure, so I post a question.

// before
const beforeData = [
  { 
    product_id: 1,
    attribute_values: [
      { attribute_value_id: 1 },
      { attribute_value_id: 2 },
      { attribute_value_id: 3 }
    ]
  }, 
  { 
    product_id: 2,
    attribute_values: [
      { attribute_value_id: 1 },
      { attribute_value_id: 2 },
      { attribute_value_id: 3 }
    ]
  },

  (...)
];

// after
const afterData = [
  { product_id: 1, attribute_value_id: 1 },
  { product_id: 1, attribute_value_id: 2 },
  { product_id: 1, attribute_value_id: 3 },
  { product_id: 2, attribute_value_id: 1 },
  { product_id: 2, attribute_value_id: 2 },
  { product_id: 2, attribute_value_id: 3 },
];

I tried to create the data structure I wanted somehow using a library. But I did not get what I wanted and I got help from lodash. Note that attribute_values.length is exactly the same.

const getAttributeValueId = _.chain(beforeData[0].attribute_values)
  .flatten()
  .value();

console.log(getAttributeValueId)

On the console:

[ { attribute_value_id: 1 },
  { attribute_value_id: 2 },
  { attribute_value_id: 3 } ]

const getProductId = () => {
  const arrOne = [];
  data.forEach((val, idx) => {
    arrOne[idx] = { product_id: val.product_id };
  });

  const arrTwo = [];
  _.forEach(arrOne, (val, idx) => {
    for (let i = 0; i < getAttributeValueId.length; i++) {
      arrTwo.push(arrOne[idx]);
    }
  });
  return arrTwo;
};

console.log(getProductId());

On the console:

[ { product_id: 1 },
  { product_id: 1 },
  { product_id: 1 },
  { product_id: 2 },
  { product_id: 2 },
  { product_id: 2 },
  { product_id: 3 },
  { product_id: 3 },
  { product_id: 3 } ]

I do not know how I can insert attribute_value_id for each array anymore. I wanted to solve it by myself, but I do not have enough ability to solve it. I would appreciate your help.

And i have a question. Is it simpler than using for loop to solve by using array method likereduce, map?

Thanks for reading.

score 0 · Accepted Answer · answered Jun 18 '19 at 11:34

0

You could take (upcoming) Array#flatMap and map the common property to each nested properties.

const
    data = [{ product_id: 1, attribute_values: [{ attribute_value_id: 1 }, { attribute_value_id: 2 }, { attribute_value_id: 3 }] }, { product_id: 2, attribute_values: [{ attribute_value_id: 1 }, { attribute_value_id: 2 }, { attribute_value_id: 3 }] }],
    result = data.flatMap(({ product_id, attribute_values }) =>
        attribute_values.map(o => ({ product_id, ...o })));
    
console.log(result);

answered Jun 18 '19 at 11:34

Nina Scholz

376,160
25
347
392

Is not `flatMap` still a method in node.js? I am using node version version 8.11.3. – Yangwook Ian Jeong Jun 18 '19 at 11:57
Fixed the following link reporting. [Why no Array.prototype.flatMap in javascript?](https://stackoverflow.com/questions/39837678/why-no-array-prototype-flatmap-in-javascript) – Yangwook Ian Jeong Jun 18 '19 at 12:07

Javascript: Changing the nested data structure

1 Answers1