how can i reduce nested array to single array of object

Question

i'm trying to reduce the nested array into array of objects as i would like to split the multi-level array to single object of array

this is the array structure that i want to reduce

var array1 = [
  {
    "course": "ABC"
    "skills":["skill1", "skill2"],
  },
  {
    "course": "DEF"
    "skills":["skill1"],
  },
  {
    "course": "GHI"
    "skills":["skill1", "skill2", "skill3"],
  }
]

what i expect as an outcome

var array1 = [
  {
    "course": "ABC"
    "skill":"skill1",
  },
  {
    "course": "ABC"
    "skill":"skill2",
  },
  {
    "course": "DEF"
    "skill":"skill1",
  },
  {
    "course": "GHI"
    "skills":"skill1",
  },
  {
    "course": "GHI"
    "skills":"skill2",
  },
  {
    "course": "GHI"
    "skill": "skill3",
  }
]

Adrian Brand · Accepted Answer · 2019-06-27 04:07:37Z

3

var array1 = [
  {
    course: "ABC",
    skills:["skill1", "skill2"]
  },
  {
    course: "DEF",
    skills: ["skill1"]
  },
  {
    course: "GHI",
    skills: ["skill1", "skill2", "skill3"]
  }
];

const flatten = array =>
  array.reduce((results, item) => [...results, ...item.skills.map(skill => ({ course: item.course, skill: skill }))], []);


console.log(flatten(array1));

edited Jun 27, 2019 at 4:07

answered Jun 27, 2019 at 4:02

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

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

Comments

slider · Accepted Answer · 2019-06-27 04:35:17Z

2

You can do this with flatMap (if it's supported where you're running your code). The idea is to map each course, and then further map each skill to the object you want and then flatten it:

var array1 = [{
    "course": "ABC",
    "skills": ["skill1", "skill2"]
  },
  {
    "course": "DEF",
    "skills": ["skill1"]
  },
  {
    "course": "GHI",
    "skills": ["skill1", "skill2", "skill3"]
  }
];

var res = array1.flatMap(({course, skills}) => skills.map(skill => ({course, skill})));
console.log(res);

edited Jun 27, 2019 at 4:35

answered Jun 27, 2019 at 4:24

slider

13.1k1 gold badge29 silver badges45 bronze badges

2 Comments

Adrian Brand Over a year ago

I learnt something today, didn't know arrays had a flatMap method. But I think destructing in answering questions adds a layer of difficulty that is unnecessary for people learning new concepts as item => item.skills.map(skill => ({ item.course, skill: skill })) removes a huge barrier of understanding for people not up with destructing yet.

slider Over a year ago

@AdrianBrand yes flatMap is quite useful. As for whether destructuring is difficult or not, you may be right about new learners. But most JS developers who have spent some time with the language would probably be familiar with the concept nowadays.

brk · Accepted Answer · 2019-06-27 04:03:52Z

0

You can do it by using two forEach. In the first forEach loop the outer array and in the inner forEach iterate the skills array and create an object using each element from the skills array

var array1 = [{
    "course": "ABC",
    "skills": ["skill1", "skill2"],
  },
  {
    "course": "DEF",
    "skills": ["skill1"],
  },
  {
    "course": "GHI",
    "skills": ["skill1", "skill2", "skill3"],
  }
]


let newArr = [];
array1.forEach(function(item) {


  item.skills.forEach(function(elem) {
    newArr.push({
      course: item.course,
      skill: elem
    })
  })
});
console.log(newArr)

answered Jun 27, 2019 at 4:03

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Ajit Kumar · Accepted Answer · 2019-06-27 04:07:47Z

0

You can do this using map function of array object. map traverse through each element.

var array1 = [
  {
    "course": "ABC",
    "skills":["skill1", "skill2"],
  },
  {
    "course": "DEF",
    "skills":["skill1"],
  },
  {
    "course": "GHI",
    "skills":["skill1", "skill2", "skill3"],
  }
];

let mappedArray = [];

array1.map(el=>{
  el.skills.map(skill=>{
    mappedArray.push({
      course: el.course,
      skill: skill
    });
  });
});

console.log(mappedArray);

answered Jun 27, 2019 at 4:07

Ajit Kumar

1,5351 gold badge15 silver badges26 bronze badges

Comments

Jack Bashford · Accepted Answer · 2019-06-27 04:08:34Z

0

Kind of the opposite of what most people want! Here you go - a version using reduce and spreading:

var array1 = [
  {
    "course": "ABC",
    "skills":["skill1", "skill2"],
  },
  {
    "course": "DEF",
    "skills":["skill1"],
  },
  {
    "course": "GHI",
    "skills":["skill1", "skill2", "skill3"],
  }
];

const res = array1.reduce((a, { skills, ...c }) => {
  skills.forEach(skill => a.push({ ...c, skills: skill }));
  return a;
}, []);

console.log(res);

answered Jun 27, 2019 at 4:08

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

Adrian Brand Over a year ago

Nothing will confuse a noob trying to learn about reduce like throwing in some destructuring with the rest operator and the spread operator in the same answer.

Collectives™ on Stack Overflow

how can i reduce nested array to single array of object

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related