javascript - 对象数组内的深层对象中的 Vue/Javascript 过滤器
问题描述
我需要在具有多个对象的数组中深入过滤数组内的类别对象。在 API 调用中,我将拥有这个具有嵌套类别的对象数组。如果每个对象包含特定的类别 ID,我需要过滤它。这是 JSON -
items_loop: [
{
ID: 1,
name: "Item A",
taxonomy: {
categories: [
{
name: "Book",
parent: 12,
taxonomy: "category",
},
{
name: "Cover",
parent: 4,
taxonomy: "category",
},
{
name: "Other",
parent: 15,
taxonomy: "category",
},
],
},
},
{
ID: 2,
name: "Item B",
taxonomy: {
categories: [
{
name: "Toys",
parent: 16,
taxonomy: "category",
},
{
name: "Book",
parent: 12,
taxonomy: "category",
},
{
name: "Other",
parent: 15,
taxonomy: "category",
},
],
},
},
{
ID: 3,
name: "Item C",
taxonomy: {
categories: [
{
name: "Ext",
parent: 6,
taxonomy: "category",
},
{
name: "Cover",
parent: 4,
taxonomy: "category",
},
{
name: "Other",
parent: 15,
taxonomy: "category",
},
],
},
},
]
我想用只包含“父”的对象创建一个新数组:15,但是我如何才能深入过滤这 3 个对象?我试过这个,但它不工作
function findInObjArray(array, value) {
var found = []
// Helper to search obj for value
function findInObj(obj, value) {
return Object.values(obj).some((v) =>
// If v is an object, call recursively
typeof v == "object" && v != "null"
? findInObj(v, value)
: // If string, check if value is part of v
typeof v == "string"
? v.indexOf(value) >= 0
: // Check numbers, make NaN == NaN
typeof v == "number"
? v === value || (isNaN(v) && isNaN(value))
: // Otherwise look for strict equality: null, undefined, function, boolean
v === value
)
}
array.forEach(function (obj) {
if (findInObj(obj, value)) found.push(obj)
})
return found
}
解决方案
您的意思是这样的-过滤主数组中的对象内部的数组?您可以根据需要迭代对象数组并循环过滤。或使用map
如下示例的方法:
const obj = [{
ID: 1,
name: 'Item A',
taxonomy : {
categories : [{
name: "Book",
parent: 12,
taxonomy: "category",
},{
name: "Cover",
parent: 4,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
},{
ID: 2,
name: 'Item B',
taxonomy : {
categories : [{
name: "Toys",
parent: 16,
taxonomy: "category",
},{
name: "Book",
parent: 12,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
},{
ID: 3,
name: 'Item C',
taxonomy : {
categories : [{
name: "Ext",
parent: 6,
taxonomy: "category",
},{
name: "Cover",
parent: 4,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
}];
// Map and filter nested content
const res = obj.map(a => {
a.taxonomy.categories = a.taxonomy.categories.filter(x => x.parent === 15);
return a;
});
// Log
console.log(res)
或者,如果您的意思是要过滤主数组以仅包含具有嵌套数组且具有某些值的对象-那么这是对先前代码的少量修改
const obj = [{
ID: 1,
name: 'Item A',
taxonomy : {
categories : [{
name: "Book",
parent: 12,
taxonomy: "category",
},{
name: "Cover",
parent: 4,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
},{
ID: 2,
name: 'Item B',
taxonomy : {
categories : [{
name: "Toys",
parent: 16,
taxonomy: "category",
},{
name: "Book",
parent: 12,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
},{
ID: 3,
name: 'Item C',
taxonomy : {
categories : [{
name: "Ext",
parent: 6,
taxonomy: "category",
},{
name: "Cover",
parent: 4,
taxonomy: "category",
},{
name: "Other",
parent: 15,
taxonomy: "category",
}]
}
}];
// Map and filter nested content
const res = obj.filter(a => {
if((a.taxonomy.categories.filter(x => x.parent === 6)).length > 0) return a;
});
// Log
console.log(res)
推荐阅读
- python - 如何解决此错误“输入用尽”
- mysql - MYSQL:选择一列的 SUM 但该列基于另一个行 ID
- google-chrome - 如何检查是否在 Chromium/Chrome 中嵌入/启用了 Google 密钥?
- reactjs - 输入“承诺”
' 不能分配给在锚标记中键入 'string' - python - 设置 UTF-8 编码后未写入 CSV 文件的更改
- reactjs - 在 ReactJs 中单击外部时输入值消失
- python - `s = (iowa_file_data.dtypes == 'object')` 如何使`s` 成为`Series` 类型的变量
- alexa - 在 Alexa 中发送通知时如何在 Alexa 屏幕设备上不显示 ssml 标签
- sql - 使用更新/删除级联创建两个外键约束
- javascript - 如何在使用 jquery 刷新页面后保持复选框在模式中的选中状态?