Flatten an array inside an array of objects using lodash

Question

I have an Array like this

[
    {
        name: "A",
        job: ["1", "2"]
    },
    {
        name: "B",
        job: ["2"]
    },
    {
        name: "C",
        job: []
    }
]

How do i flatten it into something like this using lodash.

[
    {
        name: "A",
        job: ["1"]
    },
    {
        name: "A",
        job: ["2"]
    },
    {
        name: "B",
        job: ["2"]
    },
    {
        name: "C",
        job: []
    }
]

The only solution coming to my mind is to iterate recursively.

Thanks.

Is there any specific reason why you want to use lodash for this problem? It's a problem that can very easily be solved using native javascript functions. — Lars Holdaas
– Lars Holdaas, Commented Mar 12, 2019 at 11:11
Hey @LarsHoldaas, The reason i preferred lodash over VanillaJS is because if in future the nesting has sub nests then lodash is better capable of handling it. At least it's what i thought based on normal lodash capabilities. — Nithin
– Nithin, Commented Mar 12, 2019 at 11:22

Nick Parsons · Accepted Answer · 2019-03-12 10:47:45Z

2

You don't need to use recursion if your object isn't multiple levels deep.

Instead, you can achieve this without lodash and recursion. You could use .flatMap to get each job array, and then create an individual object for each item within that job array using .map.

See example below:

const arr = [{name: "A", job: ["1", "2"]}, {name: "B", job: ["2"]}, {name: "C", job: []}];

const spreadArrObj = arr => {
  return arr.flatMap(({name, job}) => {
    if(job.length < 2) return {name, job}; // if the object is empty or has one one object then return the object
    return job.map(elem => ({ // map each element in the job array to its own object
      name,
      job: [elem]
    }));
  });
}

console.log(spreadArrObj(arr));

See browser compatibility for .flatMap here.

edited Mar 12, 2019 at 10:47

answered Mar 12, 2019 at 10:31

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

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

2 Comments

Nithin Over a year ago

Thank you. I am using lodash's _.flatMap() so i guess it won't be a problem on the backend.

Nick Parsons Over a year ago

@Nithin no worries :), yeah, that should work fine then

Syed Mehtab Hassan · Accepted Answer · 2019-03-12 10:31:41Z

1

let arr = [{
    name: "A",
    job: ["1", "2"]
  },
  {
    name: "B",
    job: ["2"]
  },
  {
    name: "C",
    job: []
  }
];
let newArr = [];
for (i = 0; i < arr.length; i++) {
  var job = arr[i].job
  if (job.length > 0) {
    for (j = 0; j < job.length; j++) {
      obj = {};
      obj.name = arr[i].name;
      obj.job = [job[j]];
      newArr.push(obj);
    }
  } else {
    obj = {};
    obj.name = arr[i].name;
    obj.job = [];
    newArr.push(obj);
  }
}
console.log(newArr);

answered Mar 12, 2019 at 10:31

Syed Mehtab Hassan

1,3571 gold badge12 silver badges24 bronze badges

1 Comment

Nithin Over a year ago

Thank you. This is how i had implemented earlier.

brk · Accepted Answer · 2019-03-12 10:37:01Z

1

You can use array reduce and check length of job array. If it is more than 1 then iterate the job array and create a new object and push it to the accumulator

let data = [{
    name: "A",
    job: ["1", "2"]
  },
  {
    name: "B",
    job: ["2"]
  },
  {
    name: "C",
    job: []
  }
]

let newData = data.reduce(function(acc, curr) {
  if (curr.job.length > 1) {
    curr.job.forEach(function(item) {
      acc.push({
        name: curr.name,
        job: [item]
      })

    })
  } else {
    acc.push(curr)

  }
  return acc;
}, []);
console.log(newData)

answered Mar 12, 2019 at 10:37

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Nithin Over a year ago

Thank you @brk, This solution also works and we can use it regardless of having lodash. It's just that Nick answered first and my question also had lodash requirement satisfied.

Collectives™ on Stack Overflow

Flatten an array inside an array of objects using lodash

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related