[英]Filter an array of objects based on a property and value from a different array of objects
我有两组数组,一组用于表的标题(列),另一组用于表的行。
const headers = [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
visible: true
},
{ text: 'Calories', value: 'calories', visible: true },
{ text: 'Fat (g)', value: 'fat', visible: true },
{ text: 'Carbs (g)', value: 'carbs', visible: true },
{ text: 'Protein (g)', value: 'protein', visible: true },
{ text: 'Iron (%)', value: 'iron', visible: true }
]
const desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
}
]
我要实现的目标是使用户能够确定他们希望在表中查看数据的哪几列。
我正在使用Vue.js,因此我尝试设置复选框的集合,每个复选框都通过v-bind
作为headers
集合中的headers
。
我正在使用以下方法:
computed: {
filteredHeaders () {
return this.headers.filter(header => header.visible)
}
}
效果如此,糟糕! 表格列标题会根据通过复选框选择的列进行更改。
我遇到的问题是尝试根据选定的列(或filteredHeaders
)过滤行数据(或desserts
)。
我尝试了以下方法:
computed: {
...
filteredItems () {
return this.desserts.filter(dessert => {
return this.filteredHeaders.some(header => {
return Object.keys(header).some(prop => {
return dessert[prop] != header[prop] && header.visible
})
})
})
}
}
即使没有引发任何错误, filteredItems
的结果仍然是原始desserts
的结果,并且仍应显示应排除的属性(当visible
被复选框集合设置为false
)。
我确定我已经接近了,但是闭合并不能使我得到那支雪茄(俗话说)!
此方法应大致实现您要查找的内容:
const headers = [{ text: "Dessert (100g serving)", align: "left", sortable: false, value: "name", visible: true }, { text: "Calories", value: "calories", visible: true }, { text: "Fat (g)", value: "fat", visible: true }, { text: "Carbs (g)", value: "carbs", visible: true }, { text: "Protein (g)", value: "protein", visible: true }, { text: "Iron (%)", value: "iron", visible: true } ]; const desserts = [{ name: "Frozen Yogurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: "1%" }, { name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: "1%" }, { name: "Eclair", calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: "7%" }, { name: "Cupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: "8%" } ]; const filterRows = (rows, headers) => { // Map over the full list of rows to filter down return rows.map(row => { // Create a new row to return to avoid mutating const filteredRow = {}; // Loop through each header and copy the row value corresponding to that header value headers.forEach(header => { filteredRow[header.value] = row[header.value]; }); // Return the copied and filtered row return filteredRow; }); }; console.log(filterRows(desserts, headers)); console.log(filterRows(desserts, [{ text: "Iron (%)", value: "iron", visible: true }]));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.