简体   繁体   English

如何在 object 的深层嵌套数组和 javascript 的数组中获取具有特定值的子项的父项?

[英]How can get parent of a child that has a specific value in a deep nested array of object and array with javascript?

I have a deep nested array of objects and arrays in my project and I want to find a object that has a value in nested array child of itself;我的项目中有一个深层嵌套的对象数组和 arrays,我想找到一个 object,它在其自身的嵌套数组子项中有一个值; Below is a simple example of my json (For a better understanding, I simplified it a bit):下面是我的 json 的简单示例(为了更好理解,我简化了一点):

sections: [
            {
                id: 'e9904688-fd8a-476d-8f46-930bc4d888d1',
                name: 'sec-e9904688-fd8a-476d-8f46-930bc4d888d1',
                rows: [
                    {
                        id: '2f1bc178-d2bf-4283-ae9c-868513af789f',
                        name: 'row-2f1bc178-d2bf-4283-ae9c-868513af789f',
                        cols: [
                            {
                                id: 'adad03c8-60f3-4db1-8c6c-a125bbd7f114',
                                name: 'col-adad03c8-60f3-4db1-8c6c-a125bbd7f114',
                                isEmpty: false,
                                size: {
                                    lg: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
                                    md: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
                                    sm: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
                                    xs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 },
                                    xxs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }
                                },
                                controles: [
                                    {
                                        id : '37619580-6ba6-4058-a39b-2d57d23007d6' , 
                                        name : 'control name' , 
                                        type : 'control type' , 
                                        options : [
                                            {} , 
                                            {}
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
            {
                id: 'f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
                name: 'sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775',
                rows: [
                    {
                        id: '8263d5fc-4445-4243-8cb2-3853b3918994',
                        name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994',
                        cols: [
                            {
                                id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa',
                                name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa',
                                isEmpty: false,
                                size: {
                                    lg: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
                                    md: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
                                    sm: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
                                    xs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 },
                                    xxs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }
                                },
                                controles: [
                                    {
                                        id : '37619580-6ba6-4058-a39b-2d57d23007d6' , 
                                        name : 'control name' , 
                                        type : 'control type' , 
                                        options : [
                                            {} , 
                                            {}
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]

for example I want find an object that its child has col-e0a56604-196a-4dcc-a04e-a56968a2f8aa value (in size in i key and I want its parent that's mean a object of cols array with name equal of searched characters)例如,我想找到一个 object,它的孩子有 col-e0a56604-196a-4dcc-a04e-a56968a2f8aa 值(在 i 键中的大小,我想要它的父级,这意味着一个 object 的 cols 数组,名称等于搜索字符)

You have to based the seach on your object structure.您必须根据 object 结构进行搜索。 In your case it could look like this.在您的情况下,它可能看起来像这样。

 const sections = [ { id: 'e9904688-fd8a-476d-8f46-930bc4d888d1', name: 'sec-e9904688-fd8a-476d-8f46-930bc4d888d1', rows: [ { id: '2f1bc178-d2bf-4283-ae9c-868513af789f', name: 'row-2f1bc178-d2bf-4283-ae9c-868513af789f', cols: [ { id: 'adad03c8-60f3-4db1-8c6c-a125bbd7f114', name: 'col-adad03c8-60f3-4db1-8c6c-a125bbd7f114', isEmpty: false, size: { lg: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }, md: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }, sm: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }, xs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 }, xxs: { i: "col-adad03c8-60f3-4db1-8c6c-a125bbd7f114", x: 1, y: 0, w: 12, h: 4 } }, controles: [ { id: '37619580-6ba6-4058-a39b-2d57d23007d6', name: 'control name', type: 'control type', options: [ {}, {} ] } ] } ] } ] }, { id: 'f3f5522c-0b7f-4d6f-84a7-50cce4e92775', name: 'sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775', rows: [ { id: '8263d5fc-4445-4243-8cb2-3853b3918994', name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994', cols: [ { id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa', name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', isEmpty: false, size: { lg: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }, md: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }, sm: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }, xs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 }, xxs: { i: "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa", x: 1, y: 0, w: 12, h: 4 } }, controles: [ { id: '37619580-6ba6-4058-a39b-2d57d23007d6', name: 'control name', type: 'control type', options: [ {}, {} ] } ] } ] } ] } ]; const searchString = "col-e0a56604-196a-4dcc-a04e-a56968a2f8aa"; const foundItem = sections.find( section => section.rows.find( row => row.cols.find( col => Object.keys(col.size).find(size => col.size[size].i === searchString) ) ) ); console.log(foundItem.id);

Your question is a bit hard to understand, but here is a possible solution using object-scan .你的问题有点难以理解,但这里有一个使用object-scan的可能解决方案。 Note that all parents are present in the parents array, so pick whichever one you desire.请注意,所有父母都存在于parents数组中,因此请选择您想要的任何一个。

 // const objectScan = require('object-scan'); const sections = [{"id":"e9904688-fd8a-476d-8f46-930bc4d888d1","name":"sec-e9904688-fd8a-476d-8f46-930bc4d888d1","rows":[{"id":"2f1bc178-d2bf-4283-ae9c-868513af789f","name":"row-2f1bc178-d2bf-4283-ae9c-868513af789f","cols":[{"id":"adad03c8-60f3-4db1-8c6c-a125bbd7f114","name":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","isEmpty":false,"size":{"lg":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"md":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"sm":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"xs":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4},"xxs":{"i":"col-adad03c8-60f3-4db1-8c6c-a125bbd7f114","x":1,"y":0,"w":12,"h":4}},"controles":[{"id":"37619580-6ba6-4058-a39b-2d57d23007d6","name":"control name","type":"control type","options":[{},{}]}]}]}]},{"id":"f3f5522c-0b7f-4d6f-84a7-50cce4e92775","name":"sec-f3f5522c-0b7f-4d6f-84a7-50cce4e92775","rows":[{"id":"8263d5fc-4445-4243-8cb2-3853b3918994","name":"row-8263d5fc-4445-4243-8cb2-3853b3918994","cols":[{"id":"e0a56604-196a-4dcc-a04e-a56968a2f8aa","name":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","isEmpty":false,"size":{"lg":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"md":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"sm":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"xs":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4},"xxs":{"i":"col-e0a56604-196a-4dcc-a04e-a56968a2f8aa","x":1,"y":0,"w":12,"h":4}},"controles":[{"id":"37619580-6ba6-4058-a39b-2d57d23007d6","name":"control name","type":"control type","options":[{},{}]}]}]}]}]; objectScan(['**[*].name'], { filterFn: ({ value, parents }) => { if (value === 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa') { console.log(parents[2]); } } })(sections); // => { id: '8263d5fc-4445-4243-8cb2-3853b3918994', name: 'row-8263d5fc-4445-4243-8cb2-3853b3918994', cols: [ { id: 'e0a56604-196a-4dcc-a04e-a56968a2f8aa', name: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', isEmpty: false, size: { lg: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, md: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, sm: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, xs: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 }, xxs: { i: 'col-e0a56604-196a-4dcc-a04e-a56968a2f8aa', x: 1, y: 0, w: 12, h: 4 } }, controles: [ { id: '37619580-6ba6-4058-a39b-2d57d23007d6', name: 'control name', type: 'control type', options: [ {}, {} ] } ] } ] }
 .as-console-wrapper {max-height: 100%;important: top: 0}
 <script src="https://bundle.run/object-scan@13.7.1"></script>

Disclaimer : I'm the author of object-scan免责声明:我是对象扫描的作者

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 javascript按值在嵌套对象/数组深处查找 - javascript find by value deep in a nested object/array 如何删除深嵌套数组中的 object? Javascript - How to remove object in deep nested array ? Javascript 使用lodash获取深层嵌套对象中的父数组键 - Get parent array key in deep nested object using lodash 如何使用Angular.js / Javascript通过使用子数组键值获取父对象值 - How to get parent object value by using child array key value using Angular.js/Javascript javascript在嵌套子数组中获取对象 - javascript get object in nested child array 以递归方式在对象的深层嵌套数组中查找值,javascript - Finding value in deep nested array of object, recursively, javascript 如何从 object 的嵌套数组中获取每个父项的值 - How to get the value of each parent from a nested array of object JAVASCRIPT - 从对象的父对象数组中获取值,在数组展平后的子对象中 - JAVASCRIPT - Get Value from Parent Array of Objects, inside the Child Object after Array Flattening 如何检查数组中 object 的键是否在 javascript 中具有特定值 - How to check if key of object in array has specific value in javascript JavaScript:如何通过嵌套在 object 2 层深的值过滤数组 - JavaScript: How to filter array by values nested in object 2 level deep
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM