I'm working on an objects that contains some user details and I need to convert this object to another object to build a contact application. I'm using Lodash to deal with arrays and objects.
[
{
"id": 1,
"first_name": "Alie",
"last_name": "Stigger",
"email": "[email protected]",
"gender": "Female",
"avatar":
".jpg?size=200x200&set=set1",
"phone_number": "617-845-6906"
},
{
"id": 2,
"first_name": "Kendall",
"last_name": "Mayes",
"email": "[email protected]",
"gender": "Male",
"avatar": ".jpg?size=200x200&set=set1",
"phone_number": "193-270-2893"
},
{
"id": 3,
"first_name": "Yolanthe",
"last_name": "Maddaford",
"email": "[email protected]",
"gender": "Female",
"avatar":
".jpg?size=200x200&set=set1",
"phone_number": "267-365-2165"
}
]
Now all I want is to build another object from main one which contains alphabet letters based on last_name prop using Lodash.
In this case:
[
{
letter: "S",
contacts: [
{
id: 1,
first_name: "Alie",
last_name: "Stigger",
email: "[email protected]",
gender: "Female",
avatar:
".jpg?size=200x200&set=set1",
phone_number: "617-845-6906"
}
]
},
{
letter: "M",
contacts: [
{
id: 2,
first_name: "Kendall",
last_name: "Mayes",
email: "[email protected]",
gender: "Male",
avatar: ".jpg?size=200x200&set=set1",
phone_number: "193-270-2893"
},
{
id: 3,
first_name: "Yolanthe",
last_name: "Maddaford",
email: "[email protected]",
gender: "Female",
avatar:
".jpg?size=200x200&set=set1",
phone_number: "267-365-2165"
}
]
}
]
I'm working on an objects that contains some user details and I need to convert this object to another object to build a contact application. I'm using Lodash to deal with arrays and objects.
[
{
"id": 1,
"first_name": "Alie",
"last_name": "Stigger",
"email": "[email protected]",
"gender": "Female",
"avatar":
"https://robohash/sintnihiladipisci.jpg?size=200x200&set=set1",
"phone_number": "617-845-6906"
},
{
"id": 2,
"first_name": "Kendall",
"last_name": "Mayes",
"email": "[email protected]",
"gender": "Male",
"avatar": "https://robohash/nemoetqui.jpg?size=200x200&set=set1",
"phone_number": "193-270-2893"
},
{
"id": 3,
"first_name": "Yolanthe",
"last_name": "Maddaford",
"email": "[email protected]",
"gender": "Female",
"avatar":
"https://robohash/exercitationemestaccusamus.jpg?size=200x200&set=set1",
"phone_number": "267-365-2165"
}
]
Now all I want is to build another object from main one which contains alphabet letters based on last_name prop using Lodash.
In this case:
[
{
letter: "S",
contacts: [
{
id: 1,
first_name: "Alie",
last_name: "Stigger",
email: "[email protected]",
gender: "Female",
avatar:
"https://robohash/sintnihiladipisci.jpg?size=200x200&set=set1",
phone_number: "617-845-6906"
}
]
},
{
letter: "M",
contacts: [
{
id: 2,
first_name: "Kendall",
last_name: "Mayes",
email: "[email protected]",
gender: "Male",
avatar: "https://robohash/nemoetqui.jpg?size=200x200&set=set1",
phone_number: "193-270-2893"
},
{
id: 3,
first_name: "Yolanthe",
last_name: "Maddaford",
email: "[email protected]",
gender: "Female",
avatar:
"https://robohash/exercitationemestaccusamus.jpg?size=200x200&set=set1",
phone_number: "267-365-2165"
}
]
}
]
- Is Lodash necessary? How about native JS, it'd be really easy? – CertainPerformance Commented Jun 3, 2018 at 9:00
- @CertainPerformance Do you have an idea to use native JS? – Sepehr Commented Jun 3, 2018 at 9:01
3 Answers
Reset to default 7You could group by the upper case value and then map the result.
var data = [{ id: 1, first_name: "Alie", last_name: "Stigger", email: "[email protected]", gender: "Female", avatar: "https://robohash/sintnihiladipisci.jpg?size=200x200&set=set1", phone_number: "617-845-6906" }, { id: 2, first_name: "Kendall", last_name: "Mayes", email: "[email protected]", gender: "Male", avatar: "https://robohash/nemoetqui.jpg?size=200x200&set=set1", phone_number: "193-270-2893" }, { id: 3, first_name: "Yolanthe", last_name: "Maddaford", email: "[email protected]", gender: "Female", avatar: "https://robohash/exercitationemestaccusamus.jpg?size=200x200&set=set1", phone_number: "267-365-2165" }],
result = _(data)
.groupBy(o => o.last_name[0].toUpperCase())
.map((contacts, letter) => ({ letter, contacts }))
.value();
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>You can use lodash#groupBy to group each item by the first letter of the last_name and lodash#map to transform the grouped objected into a transformed array.
var result = _(data)
.groupBy('last_name[0]')
.map((contacts, letter) => ({ letter, contacts }))
.value();
var data = [
{
"id": 1,
"first_name": "Alie",
"last_name": "Stigger",
"email": "[email protected]",
"gender": "Female",
"avatar":
"https://robohash/sintnihiladipisci.jpg?size=200x200&set=set1",
"phone_number": "617-845-6906"
},
{
"id": 2,
"first_name": "Kendall",
"last_name": "Mayes",
"email": "[email protected]",
"gender": "Male",
"avatar": "https://robohash/nemoetqui.jpg?size=200x200&set=set1",
"phone_number": "193-270-2893"
},
{
"id": 3,
"first_name": "Yolanthe",
"last_name": "Maddaford",
"email": "[email protected]",
"gender": "Female",
"avatar":
"https://robohash/exercitationemestaccusamus.jpg?size=200x200&set=set1",
"phone_number": "267-365-2165"
}
];
var result = _(data)
.groupBy('last_name[0]')
.map((contacts, letter) => ({ letter, contacts }))
.value();
console.log(result);.as-console-wrapper{min-height:100%;top:0}<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>You can group with reduce pretty easily, no need for a library, just select the last_name, push to an array in an object indexed by the first letter, and get the object's values:
const input=[{"id":1,"first_name":"Alie","last_name":"Stigger","email":"[email protected]","gender":"Female","avatar":"https://robohash/sintnihiladipisci.jpg?size=200x200&set=set1","phone_number":"617-845-6906"},{"id":2,"first_name":"Kendall","last_name":"Mayes","email":"[email protected]","gender":"Male","avatar":"https://robohash/nemoetqui.jpg?size=200x200&set=set1","phone_number":"193-270-2893"},{"id":3,"first_name":"Yolanthe","last_name":"Maddaford","email":"[email protected]","gender":"Female","avatar":"https://robohash/exercitationemestaccusamus.jpg?size=200x200&set=set1","phone_number":"267-365-2165"}]
const output = Object.values(
input.reduce((a, item) => {
const letter = item.last_name[0];
if (!a[letter]) a[letter] = [];
a[letter].push(item);
return a;
}, {})
);
console.log(output);