在对象中查找全部孙并对其进行迭代

Question

我在javascript中有下面的对象。

我需要找到；

1. "prop3"儿童的总数-在以下示例中为7
2. 找到第一个prop3子项，然后对它们进行迭代，直到我找到最后一个(用于step form thingy(

有什么想法吗？

{
"d399ca811f45": {
"prop1": "d399ca811f45",
"prop2": {},
"prop3": {
"1d2097764d06": {
"header": "value",
"subprop1": "1d2097764d06"
}
}
},
"6d0cb4c7748b": {
"prop1": "6d0cb4c7748b",
"prop3": {
"3a29208f0015": {
"header": "value",
"subprop1": "3a29208f0015"
},
"e8eb0f1b339b": {
"header": "value",
"subprop1": "3a29208f0015"
},
"05d43aaf7ef7": {
"header": "value",
"subprop1": "3a29208f0015"
}
}
},
"39feecfa5498": {
"prop1": "39feecfa5498",
"prop2": {},
"prop3": {
"57a07392b86e": {
"header": "value",
"subprop1": "3a29208f0015"
},
"fd84d411a823": {
"header": "value",
"subprop1": "3a29208f0015"
},
"75ff469329ab": {
"header": "value",
"subprop1": "3a29208f0015"
}
}
}
}

Answer 1

您正在寻找的概念称为"循环对象"。一旦你理解了这个概念，你就可以将不同的循环组合起来，生成你想要的数据集。

可以使用for...in循环对原始数据结构进行迭代。一个循环用于顶层对象，另一个循环则用于prop3对象。但是，您也可以使用Object.values()帮助器将对象转换为数组，并使用JS中数组可用的所有迭代工具，如forEach和reduce。

考虑以下将对象集合转换为数组的解决方案：

var data = { "d399ca811f45": { "prop1": "d399ca811f45", "prop2": {}, "prop3": { "1d2097764d06": { "header": "value", "subprop1": "1d2097764d06" } } }, "6d0cb4c7748b": { "prop1": "6d0cb4c7748b", "prop3": { "3a29208f0015": { "header": "value", "subprop1": "3a29208f0015" }, "e8eb0f1b339b": { "header": "value", "subprop1": "3a29208f0015" }, "05d43aaf7ef7": { "header": "value", "subprop1": "3a29208f0015" } } }, "39feecfa5498": { "prop1": "39feecfa5498", "prop2": {}, "prop3": { "57a07392b86e": { "header": "value", "subprop1": "3a29208f0015" }, "fd84d411a823": { "header": "value", "subprop1": "3a29208f0015" }, "75ff469329ab": { "header": "value", "subprop1": "3a29208f0015" } } } }
// Convert the 'data' into an array and reduce all items to 
// construct a new array with only prop3 items
var prop3List = Object.values(data).reduce(function(list, item) {
// Add the prop3 items to the collection
return list.concat(Object.values(item.prop3));
}, []);
console.log('Prop3 Total ', prop3List.length);
console.log('First item', prop3List[0])
// Loop through all items
prop3List.forEach(function(item){
// item.header
// item.subprop1
console.log(item.header, item.subprop1)
})

Answer 2

您可以根据当前需求使用此函数。

const propGetter = (data, keyName) => {
let propArray = []
Object.keys(data).forEach(rootKey => {
Object.keys(data[rootKey]).forEach(key => {
if (key === keyName) {
Object.keys(data[[rootKey]][[key]]).forEach(subKey => {
propArray.push({ [subKey]: data[[rootKey]][[key]][[subKey]] })
})
}
})
})
return propArray
}
const data = { "d399ca811f45": { "prop1": "d399ca811f45", "prop2": {}, "prop3": { "1d2097764d06": { "header": "value", "subprop1": "1d2097764d06" } } }, "6d0cb4c7748b": { "prop1": "6d0cb4c7748b", "prop3": { "3a29208f0015": { "header": "value", "subprop1": "3a29208f0015" }, "e8eb0f1b339b": { "header": "value", "subprop1": "3a29208f0015" }, "05d43aaf7ef7": { "header": "value", "subprop1": "3a29208f0015" } } }, "39feecfa5498": { "prop1": "39feecfa5498", "prop2": {}, "prop3": { "57a07392b86e": { "header": "value", "subprop1": "3a29208f0015" }, "fd84d411a823": { "header": "value", "subprop1": "3a29208f0015" }, "75ff469329ab": { "header": "value", "subprop1": "3a29208f0015" } } } }
console.log(propGetter(data, 'prop3'));

这将返回prop3的所有值

注意：这仅适用于当前示例。如果您想从任何级别的对象中仅基于密钥名称获取值，则需要进行一些更改