如何在 object 的深層嵌套數組和 javascript 的數組中獲取具有特定值的子項的父項？

Question

我的項目中有一個深層嵌套的對象數組和 arrays，我想找到一個 object，它在其自身的嵌套數組子項中有一個值； 下面是我的 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 : [
                                            {} , 
                                            {}
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]

例如，我想找到一個 object，它的孩子有 col-e0a56604-196a-4dcc-a04e-a56968a2f8aa 值（在 i 鍵中的大小，我想要它的父級，這意味着一個 object 的 cols 數組，名稱等於搜索字符）

Answer 1

您必須根據 object 結構進行搜索。 在您的情況下，它可能看起來像這樣。

 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);

Answer 2

你的問題有點難以理解，但這里有一個使用object-scan的可能解決方案。 請注意，所有父母都存在於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>

免責聲明：我是對象掃描的作者