ReactNativeのSectionListを使用してデータを表示しようとしています。私が達成しようとしていることを表示する以下のコードを書きました。
最初にデータをでグループ化するdate必要があり、その日付内で、場所でグループ化する必要があります。通常のJavaScriptソリューションが機能します。キーtitleとdataキーがあることが重要です。
私の入力データは次の形式です：
[ { game_id: 1171,
date: '2018-11-17',
location: 'Plaza'
},
{ game_id: 1189,
date: '2018-11-17',
location: 'Field - Kickball'
},
{ game_id: 1489,
date: '2018-11-16',
location: 'Field - Kickball'
},
{ game_id: 1488,
date: '2018-11-16',
location: 'Field - Soccer'
}
]
上記のデータ配列から次の出力を取得する必要があります。
data = [{
title: "2018-11-17",
data: [{
title: "Field - Kickball",
data: [{
game_id: 1189,
date: '2018-11-17',
location: 'Field - Kickball'
}]
},
{
title: "Plaza",
data: [{
game_id: 1171,
date: '2018-11-17',
location: 'Plaza'
}]
}
]
},
{
title: "2018-11-16",
data: [{
title: "Field - Kickball",
data: [{
game_id: 1489,
date: '2018-11-16',
location: 'Field - Kickball'
}]
},
{
title: "Field - Soccer",
data: [{
game_id: 1488,
date: '2018-11-16',
location: 'Field - Soccer'
}]
}
]
}
]
私はすでにこれを試しました：
const games = [data here]
var groups = _(games)
.groupBy(x => x.date)
.map(value => {
return _.groupBy(value, 'location')
.map(({key, value}) => ({title: key, data: value}))
})
.map((value, key) => {
return ({title: value[Object.keys(value)[0]][0].date, data: value})
})
標準ソリューションが必要な場合は、最初にオブジェクトに縮小し、そのオブジェクトの値を返し、次に出力で再度グループ化することができます:)
function groupBy( arr, prop ) {
return Object.values( arr.reduce( ( aggregate, item ) => {
const val = item[prop];
if (!aggregate[val]) {
aggregate[val] = {
[prop]: val,
data: []
};
}
aggregate[val].data.push( item );
return aggregate;
}, {} ) );
}
const games = [ { game_id: 1171,
date: '2018-11-17',
location: 'Plaza'
},
{ game_id: 1189,
date: '2018-11-17',
location: 'Field - Kickball'
},
{ game_id: 1489,
date: '2018-11-16',
location: 'Field - Kickball'
},
{ game_id: 1488,
date: '2018-11-16',
location: 'Field - Soccer'
}
];
const grouped = groupBy( games, 'date' )
.map( item => ({ ...item, data: groupBy( item.data, 'location' ) }) );
console.log( grouped );抽出された小道具をグループ化のターゲットプロパティとして使用することに注意してください。title代わりに、をに変更[prop]: valする'title': valと、2番目のグループ化が少し簡単になります:)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加