lodash .groupBy 사용. 그룹화 된 출력을 위해 자신의 키를 추가하는 방법은 무엇입니까?
API에서 반환 된이 샘플 데이터가 있습니다.
Lodash를 사용 _.groupBy
하여 데이터를 더 잘 사용할 수있는 개체로 변환하고 있습니다. 반환 된 원시 데이터는 다음과 같습니다.
[
{
"name": "jim",
"color": "blue",
"age": "22"
},
{
"name": "Sam",
"color": "blue",
"age": "33"
},
{
"name": "eddie",
"color": "green",
"age": "77"
}
]
_.groupBy
함수가 다음과 같은 객체를 반환하기를 원합니다 .
[
{
color: "blue",
users: [
{
"name": "jim",
"color": "blue",
"age": "22"
},
{
"name": "Sam",
"color": "blue",
"age": "33"
}
]
},
{
color: "green",
users: [
{
"name": "eddie",
"color": "green",
"age": "77"
}
]
}
]
현재 나는
_.groupBy(a, function(b) { return b.color})
이것은 이것을 반환하고 있습니다.
{blue: [{..}], green: [{...}]}
그룹화는 정확하지만 원하는 키 ( color
, users
) 를 추가하고 싶습니다 . 이것이 가능 _.groupBy
합니까? 또는 다른 LoDash
유틸리티?
Lodash 4.x에서 이렇게 할 수 있습니다.
var data = [{
"name": "jim",
"color": "blue",
"age": "22"
}, {
"name": "Sam",
"color": "blue",
"age": "33"
}, {
"name": "eddie",
"color": "green",
"age": "77"
}];
console.log(
_.chain(data)
// Group the elements of Array based on `color` property
.groupBy("color")
// `key` is group's name (color), `value` is the array of objects
.map((value, key) => ({ color: key, users: value }))
.value()
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
원래 답변
var result = _.chain(data)
.groupBy("color")
.pairs()
.map(function(currentItem) {
return _.object(_.zip(["color", "users"], currentItem));
})
.value();
console.log(result);
참고 : Lodash 4.0 이상에서는 .pairs
기능의 이름이_.toPairs()
이렇게 간단하지 않나요?
var result = _(data)
.groupBy(x => x.color)
.map((value, key) => ({color: key, users: value}))
.value();
또 다른 방법
_.chain(data)
.groupBy('color')
.map((users, color) => ({ users, color }))
.value();
Highest voted answer uses Lodash _.chain
function which is considered a bad practice now "Why using _.chain
is a mistake."
Here is a fewliner that approaches the problem from functional programming perspective:
import tap from "lodash/fp/tap";
import flow from "lodash/fp/flow";
import groupBy from "lodash/fp/groupBy";
const map = require('lodash/fp/map').convert({ 'cap': false });
const result = flow(
groupBy('color'),
map((users, color) => ({color, users})),
tap(console.log)
)(input)
Where input
is an array that you want to convert.
Thanks @thefourtheye, your code greatly helped. I created a generic function from your solution using the version 4.5.0 of Lodash.
function groupBy(dataToGroupOn, fieldNameToGroupOn, fieldNameForGroupName, fieldNameForChildren) {
var result = _.chain(dataToGroupOn)
.groupBy(fieldNameToGroupOn)
.toPairs()
.map(function (currentItem) {
return _.zipObject([fieldNameForGroupName, fieldNameForChildren], currentItem);
})
.value();
return result;
}
To use it:
var result = groupBy(data, 'color', 'colorId', 'users');
Here is the updated fiddler;
https://jsfiddle.net/sc2L9dby/
Here is an updated version using lodash 4 and ES6
const result = _.chain(data)
.groupBy("color")
.toPairs()
.map(pair => _.zipObject(['color', 'users'], pair))
.value();
I would suggest a different approach, using my own library you could do this in a few lines:
var groupMe = sequence(
groupBy(pluck('color')),
forOwn(function(acc, k, v) {
acc.push({colors: k, users: v});
return acc;
},[])
);
var result = groupMe(collection);
This would a be a bit difficult with lodash or Underscore because the arguments are in the opposite order order, so you'd have to use _.partial
a lot.
Example groupBy and sum of a column using Lodash 4.17.4
var data = [{
"name": "jim",
"color": "blue",
"amount": 22
}, {
"name": "Sam",
"color": "blue",
"amount": 33
}, {
"name": "eddie",
"color": "green",
"amount": 77
}];
var result = _(data)
.groupBy(x => x.color)
.map((value, key) =>
({color: key,
totalamount: _.sumBy(value,'amount'),
users: value})).value();
console.log(result);
In 2017 do so
_.chain(data)
.groupBy("color")
.toPairs()
.map(item => _.zipObject(["color", "users"], item))
.value();
'Program Tip' 카테고리의 다른 글
무선을 통한 ADB (0) | 2020.10.06 |
---|---|
UIView에 알파를 설정하면 발생하지 않아야하는 하위 뷰에 알파가 설정됩니다. (0) | 2020.10.06 |
CSS를 사용하여 div에서 배경 이미지 크기 조정 (0) | 2020.10.06 |
ActionName의 목적 (0) | 2020.10.06 |
Google Maps API V3 : 이상한 UI 디스플레이 결함 (스크린 샷 포함) (0) | 2020.10.06 |