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",
  }
]

Answer 1

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));

Answer 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);

Answer 3

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)

Answer 4

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);

Answer 5

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);