如何过滤 JavaScript 中的嵌套对象属性？
Posted
技术标签:
【中文标题】如何过滤 JavaScript 中的嵌套对象属性？【英文标题】：How to filter on a nested object property in JavaScript? 【发布时间】：2022-01-24 03:51:21 【问题描述】：以下返回具有匹配arrValues 值的所有arrProps：
const arr = [
arrProps: [name: '1', prop2: 'aaa'], arrValues: ['apple', 'orange'] ,
arrProps: [name: '2', prop2: 'bbb'], arrValues: ['taco', 'orange' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: ['fish', 'apple', 'orange']
];
const result = arr
.flatMap(( arrValues ) => arrValues ) // all values
.filter((value, index, coll) => coll.indexOf(value) === index) //unique values
.reduce((acc, value) =>
const parentProp = arr // name, prop2, arrValues
.filter((obj) => obj.arrValues.includes(value))
.map((obj) => obj.arrProps[0].name);
//.map((obj) => [ source: obj.arrProps[0].name, value: obj.arrValues[0], sourceID: null]);
acc[value] = (acc[value] ? [...acc[value], parentProp] : [parentProp])
.join(',');
acc[value] = parentProp
return acc;
, )
console.log(result);
console.table(result);
我需要向 arrValues 添加其他属性，从而使用对象而不是值：
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ symbol: 'apple', id: '1.apple' , symbol: 'orange', id: '1.orange'] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ symbol: 'fish', id: '2.fish' , symbol: 'pizza', id: '2.pizza' , symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ symbol: 'grape', id: '3.grape', symbol: 'apple', id: '3.apple' ] ,
];
从简单的'apple'，我需要添加一些额外的唯一标识值，即 symbol: 'apple', id: '1.apple'
我确定它在这里：
aMap.filter((value, index, coll) => coll.indexOf(value) === index) // <--- filter issue
返回对象（以前的数据模型，只是值'apple'，'orange'...）：
Array(7) [Object, Object, Object, Object, Object, Object, Object]
[[Prototype]]: Array(0)
length: 7
0: Object symbol: "apple", id: "1.apple"
1: Object symbol: "orange", id: "1.orange"
2: Object symbol: "fish", id: "2.fish"
3: Object symbol: "pizza", id: "2.pizza"
4: Object symbol: "red", id: "2.red"
5: Object symbol: "grape", id: "3.grape"
6: Object symbol: "apple", id: "3.apple"
__proto__: Array(0)
我在尝试过滤 arrValues[0].symbol 时遇到了麻烦。然后我需要将arrValues[0].id 附加到结果中。我想用 arrProps 创建一个新对象，最好使用唯一 ID。
所以在apple的情况下，第一列应该呈现parent: arrProps[0], id: arrValues[0].id等
--- 更新 ---
我需要返回一个对象，而不是只显示 arrPorps[0].name 的名称，根据上面的最后一行（对原始问题的更改）。
我曾想过找到某种方法将 arrProps 附加到输出中，但被困在那里。因为我可以对数据模型进行水合，所以我向arrValues[] 添加了一些额外的识别属性（等等，这和arrProps[] 真的需要成为一个数组吗，它只是一个对象 - 重构？）：
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ exchange: '1', symbol: 'apple', id: '1.apple' , exchange: '1', symbol: 'orange', id: '1.orange' ] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ exchange: '2', symbol: 'fish', id: '2.fish' , exchange: '2', symbol: 'pizza', id: '2.pizza' , exchange: '2', symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ exchange: '3', symbol: 'grape', id: '3.grape' , exchange: '3', symbol: 'apple', id: '3.apple' ] ,
];
然后改变输出，创建输出对象，
发件人：.map(( arrProps ) => arrProps[0].name)
收件人：.map(( arrValues ) => [ exchange: arrValues[0].exchange, symbol: arrValues[0].symbol, id: arrValues[0].id ]);
整个更新的代码：
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ exchange: '1', symbol: 'apple', id: '1.apple' , exchange: '1', symbol: 'orange', id: '1.orange' ] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ exchange: '2', symbol: 'fish', id: '2.fish' , exchange: '2', symbol: 'pizza', id: '2.pizza' , exchange: '2', symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ exchange: '3', symbol: 'grape', id: '3.grape' , exchange: '3', symbol: 'apple', id: '3.apple' ] ,
];
const objectValues = arr.flatMap(( arrValues ) => arrValues); // not necessary if we refactor, removing these arrays?
const values = objectValues.map(( symbol ) => symbol);
const uniqueValues = [...new Set(values)];
const result = uniqueValues.reduce((acc, value) =>
acc[value] = arr
.filter(( arrValues ) =>
const symbols = arrValues.map(( symbol ) => symbol)
return symbols.includes(value);
)
//.map(( arrProps ) => arrProps[0].name)
.map(( arrValues ) => [ exchange: arrValues[0].exchange, symbol: arrValues[0].symbol, id: arrValues[0].id ]);
//.join(',');
return acc;
, );
console.log("RAW:" + JSON.stringify(result));
console.log(result);
console.table(result);
Object.entries(result).forEach(([k, v]) =>
console.log(` ----] The value '$k' exists in:`);
console.table(JSON.stringify(v));
//console.log("The pair: ", k)
////console.log("The value: ", v)
v.forEach(_pool => console.log(`
Exchange: $_pool[0].exchange
symbol: $_pool[0].symbol
ID: $_pool[0].id
`));
)两个问题：
-
我认为数据模型中不需要数组
输出数据错误。
"apple":[ [ "exchange":"1", "symbol":"apple", "id":"1.apple" ], [ "exchange":"3", "symbol":"grape", // should be "apple" "id":"3.grape" // should be "3.apple" ] ], "orange":[ [ "exchange":"1", "symbol":"apple", // should be "orange" "id":"1.apple" // should be "1.orange" ] ], "fish":[ [ "exchange":"2", "symbol":"fish", "id":"2.fish" ] ], "pizza":[ [ "exchange":"2", "symbol":"fish", // should be pizza "id":"2.fish" // should be 2.pizza ] ], "red":[ [ "exchange":"2", "symbol":"fish", // should be "red" "id":"2.fish" // should be "2.red" ] ], "grape":[ [ "exchange":"3", "symbol":"grape", "id":"3.grape" ] ]
--- 更新 2 ---
回到我对数据错误的怀疑，嗯，它似乎是。
不是每个对象都根据其相关的常用词来命名：apple, orange, fish，而是需要对其进行参数化并删除多余的数组（伪编码对象）：
[
itemName: 'apple',
itemParam2: 'xxx',
itemPools: [
source: '3', symbol: 'apple', id: '3.apple', cost: '0.00' ,
source: '4', symbol: 'apple', id: '4.apple', cost: '0.00' ,
source: '4', symbol: 'apple', id: '4b.apple', cost: '0.00'
],
itemName: 'orange',
itemParam2: 'yyy',
itemPools: [
...
itemName: 'fish',
itemParam2: 'zzz',
itemPools: [
...
]
仅供参考：需要验证结果数据对象的格式是否正确
实际上，orange 和 fish 应该从模型中省略，因为 itemPools.length 不 > 1。
因此，除了更新的模型属性之外，只应添加 itemPool.length > 1 的项目。
没有这个，我无法find an array item by its property。
为了提供一些未来的背景，here。
【问题讨论】：
【参考方案1】：经过几种方法，我改变了解决方案。在我看来，它现在更简单、更通用。
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ symbol: 'apple', id: '1.apple' , symbol: 'orange', id: '1.orange'] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ symbol: 'fish', id: '2.fish' , symbol: 'pizza', id: '2.pizza' , symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ symbol: 'grape', id: '3.grape', symbol: 'apple', id: '3.apple' ] ,
];
const result = arr.reduce((acc, arrProps: [ name ], arrValues ) =>
arrValues.map(( symbol ) => symbol)
.forEach((value) =>
acc[value] = acc[value] ? `$acc[value],$name`: name;
);
return acc;
, );
console.log(result);.as-console-wrapper max-height: 100% !important; top: 0; 如果我们考虑使用过滤器的以前的方法，解决方案可能如下：
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ symbol: 'apple', id: '1.apple' , symbol: 'orange', id: '1.orange'] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ symbol: 'fish', id: '2.fish' , symbol: 'pizza', id: '2.pizza' , symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ symbol: 'grape', id: '3.grape', symbol: 'apple', id: '3.apple' ] ,
];
const objectValues = arr.flatMap(( arrValues ) => arrValues);
const values = objectValues.map(( symbol ) => symbol);
const uniqueValues = [...new Set(values)];
const result = uniqueValues.reduce((acc, value) =>
acc[value] = arr
.filter(( arrValues ) =>
const symbols = arrValues.map(( symbol ) => symbol)
return symbols.includes(value);
)
.map(( arrProps ) => arrProps[0].name)
.join(',');
return acc;
, );
console.log(result);.as-console-wrapper max-height: 100% !important; top: 0; ---更新---
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ exchange: '1', symbol: 'apple', id: '1.apple' , exchange: '1', symbol: 'orange', id: '1.orange' ] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ exchange: '2', symbol: 'fish', id: '2.fish' , exchange: '2', symbol: 'pizza', id: '2.pizza' , exchange: '2', symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ exchange: '3', symbol: 'grape', id: '3.grape' , exchange: '3', symbol: 'apple', id: '3.apple' ] ,
];
const result = arr.reduce((acc, arrValues ) =>
arrValues.forEach((value) =>
acc[value.symbol] = acc[value.symbol]
? [...acc[value.symbol], value]
: [value];
);
return acc;
, );
console.log(result);.as-console-wrapper max-height: 100% !important; top: 0; ---更新 3---
const arr = [
arrProps: [ name: '1', prop2: 'aaa' ], arrValues: [ exchange: '1', symbol: 'apple', id: '1.apple' , exchange: '1', symbol: 'orange', id: '1.orange' ] ,
arrProps: [ name: '2', prop2: 'bbb' ], arrValues: [ exchange: '2', symbol: 'fish', id: '2.fish' , exchange: '2', symbol: 'pizza', id: '2.pizza' , exchange: '2', symbol: 'red', id: '2.red' ] ,
arrProps: [ name: '3', prop2: 'ccc' ], arrValues: [ exchange: '3', symbol: 'grape', id: '3.grape' , exchange: '3', symbol: 'apple', id: '3.apple' ] ,
];
const reduceArray = (data, poolsCountEdge = 1) =>
const result = data.reduce((acc, arrValues ) =>
arrValues.forEach((value) =>
const item = acc.find(( name ) => name === value.symbol);
if (item)
item.pools.push(value);
item.poolsCount = item.pools.length;
else
acc.push( name: value.symbol, poolsCount: 1, pools: [value] );
);
return acc;
, []);
return result.filter(( poolsCount ) => poolsCount > poolsCountEdge)
;
console.log(reduceArray(arr));.as-console-wrapper max-height: 100% !important; top: 0; 【讨论】：
我需要一个包含附加属性的对象，而不仅仅是匹配输出中的一串 .name。我重构了代码和数据模型以包含这些，但似乎又被卡住了。请看上面---UPDATE---之后。
@ElHaix 更新了解决方案以反映新的对象结构。请参阅---UPDATE--- 部分。
这太好了，谢谢。最后一件事：如果符号出现不止一次，我只想添加到模型中 - 比如if symbol.count > 1？
@ElHaix 请发布您想要的对象模型。
@ElHaix 检查---UPDATE 2--- 部分。现在结果不是一个对象，而是对象数组。您可以轻松完成所有数组的操作：过滤、映射、查找等。以上是关于如何过滤 JavaScript 中的嵌套对象属性？的主要内容，如果未能解决你的问题，请参考以下文章