CODEWITHSUNDEEP
javascriptarraysobjectecmascript-6
Nikhil Shrestha
Nikhil Shrestha

Reputation: 1540

how can i reduce nested array to single array of object

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

Upvotes: 0

Views: 3631

Answers (5)

slider
slider

Reputation: 12990

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

Upvotes: 2

Jack Bashford
Jack Bashford

Reputation: 44087

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

Upvotes: 0

Ajit Kumar
Ajit Kumar

Reputation: 1505

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

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21628

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

Upvotes: 3

brk
brk

Reputation: 50291

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)

Upvotes: 0

Related Questions