How to create array of object from nested array?

Question

I have the following array:

const a = [{
    Name: 'martha',
    Surname: 'james',
    Type: 'student',
  },
  {
    Name: 'Meredith',
    Surname: 'Napier',
    Type: 'Teacher',
  },
  {
    Name: 'Julie',
    Surname: 'Schrutt',
    Type: 'student',
  }
]

I need to convert in the following format:

const a = [{
      Type: 'student',
      Names: [{
          Firstname: 'martha',
          Lastname: 'james'
        },
        {
          Firstname: 'Julie',
          Lastname: 'schrutt'
        }
      ],
    },
    {
      Type: 'Teacher',
      Names: [{
        Firstname: 'meredith',
        Lastname: 'Napier'
      }, ],
    }

I have tried lodash grouping, object.entries, array map, reduce, but not able to figure out how to do it.

Does this answer your question? [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — pilchard, May 17 '21 at 09:49

DecPK · Accepted Answer · 2021-05-17T09:55:34.100

You can easily achieve this result using reduce in js.

const a = [
  {
    Name: "martha",
    Surname: "james",
    Type: "student",
  },
  {
    Name: "Meredith",
    Surname: "Napier",
    Type: "Teacher",
  },
  {
    Name: "Julie",
    Surname: "Schrutt",
    Type: "student",
  },
];

const result = a.reduce((acc, curr) => {
  const { Name, Surname, Type } = curr;
  const elSearch = acc.find((o) => o.Type === Type);
  if (elSearch) {
    elSearch.Names.push({
      Firstname: Name,
      Lastname: Surname,
    });
  } else {
    acc.push({
      Type,
      Names: [
        {
          Firstname: Name,
          Lastname: Surname,
        },
      ],
    });
  }
  return acc;
}, []);

console.log(result);

You can make the above code snippet shorter if you change the name of the variable while destructuring

const { Name: Firstname, Surname: Lastname, Type } = curr;

and use it as

elSearch.Names.push({ Firstname, Lastname });

const a = [
  { Name: "martha", Surname: "james", Type: "student"},
  { Name: "Meredith", Surname: "Napier", Type: "Teacher"},
  { Name: "Julie", Surname: "Schrutt", Type: "student"},
];

const result = a.reduce((acc, curr) => {
  const { Name: Firstname, Surname: Lastname, Type } = curr;
  const elSearch = acc.find((o) => o.Type === Type);
  if (elSearch) {
    elSearch.Names.push({ Firstname, Lastname });
  } else {
    acc.push({ Type, Names: [{ Firstname, Lastname }] });
  }

  return acc;
}, []);

console.log(result);

As the end result will be stored in `[]` you need to find the element in that array so that you can push the element/object in its `Names`. — DecPK, May 17 '21 at 23:45

score 1 · Answer 2 · answered May 17 '21 at 10:06

use this method for any group by :

const groupBy = function (list, key) {
  return list.reduce((finalList, item) => {
    const group = (finalList[item[key]] = finalList[item[key]] || [])
    group.push(item)
    return finalList
  }, {})
}

const a = [{
    Name: 'martha',
    Surname: 'james',
    Type: 'student',
  },
  {
    Name: 'Meredith',
    Surname: 'Napier',
    Type: 'Teacher',
  },
  {
    Name: 'Julie',
    Surname: 'Schrutt',
    Type: 'student',
  }
]

console.log(groupBy(a, 'Type'))

score 0 · Answer 3 · answered May 17 '21 at 09:56

Using forEach:

const a = [{
    Name: 'martha',
    Surname: 'james',
    Type: 'student',
  },
  {
    Name: 'Meredith',
    Surname: 'Napier',
    Type: 'Teacher',
  },
  {
    Name: 'Julie',
    Surname: 'Schrutt',
    Type: 'student',
  }
];

const out = [{Type: 'student', Names: []}, {Type: 'teacher', Names: []}];
a.forEach(a => {
  if (a.Type === 'student')
    return out[0].Names.push({
        Firstname: a.Name,
        Lastname: a.Surname,
    });
  out[1].Names.push({
      Firstname: a.Name,
      Lastname: a.Surname,
  });
});

console.log(out);

score 0 · Answer 4 · answered May 17 '21 at 09:56

Try something like this:

const output = {};    

for(const person of array) {
    if(!output[person.Type]) output[person.Type] = { Type: person.Type, Names:[] };
    output[person.Type].Names.push({ Firstname: person.Name, Lastname: person.Surname });
}

return Object.values(output);

Or in short:

Object.values(array.reduce((pre, curr) => {
    if(!pre[curr.Type]) pre[curr.Type] = { Type: curr.Type, Names:[] };
    pre[curr.Type].Names.push({ Firstname: curr.Name, Lastname: curr.Surname });
    return pre;
} , {}))

score 0 · Answer 5 · answered May 17 '21 at 10:01

const a = [{
    Name: 'martha',
    Surname: 'james',
    Type: 'student',
  },
  {
    Name: 'Meredith',
    Surname: 'Napier',
    Type: 'Teacher',
  },
  {
    Name: 'Julie',
    Surname: 'Schrutt',
    Type: 'student',
  }
]

const types = a.reduce((acc, next) => {
    if (acc.includes(next.Type)) {
    return acc
  }
  return acc.concat(next.Type)
}, [])

const arrayByTypes = types.map((type) => {
    return {
    Type: type,
    Names: a.filter(item => item.Type === type).map(filtered => ({ Name: filtered.Name, Surname: filtered.Surname }))
    }
})

console.log(arrayByTypes)

score 0 · Answer 6 · answered May 17 '21 at 10:02

const data = [{
        Name: 'martha',
        Surname: 'james',
        Type: 'student',
    },
    {
        Name: 'Meredith',
        Surname: 'Napier',
        Type: 'Teacher',
    },
    {
        Name: 'Julie',
        Surname: 'Schrutt',
        Type: 'student',
    }
]

function processData(data) {
    finalMap = new Map();
    data.forEach((obj) => {
        let typeName = obj["Type"];
        let firstName = obj["Name"];
        let lastName = obj["Surname"];
        if (!finalMap[typeName]) {
            finalMap[typeName] = [];
        }
        finalMap[typeName].push({
            "Firstname": firstName,
            "LastName": lastName
        });
    });
    let result = [];
    for (const [key, value] of Object.entries(finalMap)) {
        result.push({
            "Type": key,
            "Names": value
        });
    }
    return result;

}
console.log(processData(data));

Nithish · Answer 7 · 2021-05-17T15:35:48.333

We can use Array.reduce & Object.values in order to achieve the expected output.

const a = [{Name:'martha',Surname:'james',Type:'student'},{Name:'Meredith',Surname:'Napier',Type:'Teacher'},{Name:'Julie',Surname:'Schrutt',Type:'student'}];

const groupBy = (data, by) => {
  const result = data.reduce((acc, obj) => {
    const key = obj[by];
    const { Type, Name: Firstname, Surname: Lastname } = obj;
    acc[key] = acc[key] || { Type, Names: []};
    acc[key].Names.push({ Firstname, Lastname });
    return acc;
  }, {});
  return Object.values(result);
}

console.log(groupBy(a, "Type"));

.as-console-wrapper {
  max-height: 100% !important;
}

We can also use Logical nullish assignment (??=) instead of acc[obj[by]] = acc[obj[by]] || { Type, Names: []}

const a = [{Name:'martha',Surname:'james',Type:'student'},{Name:'Meredith',Surname:'Napier',Type:'Teacher'},{Name:'Julie',Surname:'Schrutt',Type:'student'}];

const groupBy = (data, by) => {
  const result = data.reduce((acc, obj) => {
    const key = obj[by];
    const { Type, Name: Firstname, Surname: Lastname } = obj;
    acc[key] ??= { Type, Names: []};
    acc[key].Names.push({ Firstname, Lastname });
    return acc;
  }, {});
  return Object.values(result);
}

console.log(groupBy(a, "Type"));

.as-console-wrapper { 
  max-height: 100% !important;
}

How to create array of object from nested array?

7 Answers7