堆栈内存溢出
  简体   繁体   English

如何使用 Angular 中的过滤器访问对象元素的嵌套数组？

[英]How to access nested array of objects element using filter in Angular?

 原文  2021-05-21 15:09:54  6   6    javascript/ json/ angular/ typescript/ filter

问题描述

I have been trying to filter the nested array of objects and display the details when the min_age_limit===18 .我一直在尝试过滤嵌套的对象数组并在min_age_limit===18时显示详细信息。

Here is the json:这是 json：

    "centers": [
    {
            "center_id": 603425,
            "name": "Childrens Hospital",
            "fee_type": "Paid",
            "sessions": [{
                "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b",
                "date": "22-05-2021",
                "available_capacity": 0,
                "min_age_limit": 18,
            }, {
                "session_id": "54347880-3090-4962-aa56-451fbaca16e1",
                "date": "22-05-2021",
                "available_capacity": 25,
                "min_age_limit": 45,
            }]
    },
    {
            "center_id": 195100,
            "name": "playschool thousandlights",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254600,
            "name": "calcicut Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 18,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 264987,
            "name": "sholings GH",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 45,
                
            },
{
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "24-05-2021",
                "available_capacity": 25,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254566,
            "name": "greenland Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 45,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 45,
                
            }]
    }
    ]

So to make it clear, I need to display the session details which has the min_age_limit===18 along with his center details.因此，为了清楚起见，我需要显示 session 详细信息，其中包含min_age_limit===18 along with his center details. . .

I tried this code:我试过这段代码：

 this.availabityDetails=this.centers.filter(item=>item.sessions.some(age=>age.min_age_limit===18)); 
       console.log(this.availabityDetails);

But I am getting the session details of all the center element which has satisfied atleast one condition.但是我得到了至少满足一个条件的所有中心元素的 session 细节。 Like,if there is a min_age_limit=18 in the element with center_id=195100 ,I need to display only that session element details along with the corresponding center details which has satifies this.就像，如果在 center_id=195100 的元素中有center_id=195100 min_age_limit=18我只需要显示 session 元素细节以及满足这一点的相应中心细节。 I need to display only this: availableDetails should contain this after filtering.我只需要显示这个：availableDetails 应该在过滤后包含这个。

[
    {
            "center_id": 603425,
            "name": "Childrens Hospital",
            "fee_type": "Paid",
            "sessions": [{
                "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b",
                "date": "22-05-2021",
                "available_capacity": 0,
                "min_age_limit": 18,
            }]
    },
    {
            "center_id": 195100,
            "name": "playschool thousandlights",
            "fee_type": "Free",
            "sessions": [ {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 254600,
            "name": "calcicut Hospital",
            "fee_type": "Free",
            "sessions": [{
                "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c",
                "date": "22-05-2021",
                "available_capacity": 15,
                "min_age_limit": 18,
            }, {
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "23-05-2021",
                "available_capacity": 19,
                "min_age_limit": 18,
                
            }]
    },
{
            "center_id": 264987,
            "name": "sholings GH",
            "fee_type": "Free",
            "sessions": [
{
                "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb",
                "date": "24-05-2021",
                "available_capacity": 25,
                "min_age_limit": 18,
                
            }]
    }
    ]

I need to have the above information in the availableDetails(ie availableDetails are of type center[]).In above o/p code,centers details are displayed with only the sessions which satisy the condition.ie session which has min_age_limit =45 are left out.我需要在availableDetails中包含上述信息（即availableDetails的类型为center []）。在上面的o / p代码中，中心详细信息仅显示满足条件的会话。即session留下min_age_limit = 45出去。 Also In the center,if there is no session with min_age_limit=18,I dont want that center details in the o/p.同样在中心，如果没有 session 且 min_age_limit=18，我不想在 o/p 中显示中心细节。 Hope it gives a Clear picture of what I want.希望它能清楚地说明我想要什么。 Help me with this code..帮我用这段代码..

6 个解决方案

解决方案1
 1  2021-05-21 16:48:51

you can try this你可以试试这个

  this.availabityDetails = [].concat.apply([], centers.map(c => c.sessions)).filter(s => s.min_age_limit === 18)

解决方案2
 0  2021-05-21 15:19:26

You can use the filter() method which creates and returns a new array with all elements that pass the test implemented by the provided function.您可以使用filter()方法创建并返回一个新数组，其中包含通过提供的 function 实现的测试的所有元素。 

 const centers = [ { "center_id": 603425, "name": "Childrens Hospital", "fee_type": "Paid", "sessions": [{ "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b", "date": "22-05-2021", "available_capacity": 0, "min_age_limit": 18, }, { "session_id": "54347880-3090-4962-aa56-451fbaca16e1", "date": "22-05-2021", "available_capacity": 25, "min_age_limit": 45, }] }, { "center_id": 195100, "name": "playschool thousandlights", "fee_type": "Free", "sessions": [{ "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c", "date": "22-05-2021", "available_capacity": 15, "min_age_limit": 45, }, { "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb", "date": "23-05-2021", "available_capacity": 19, "min_age_limit": 18, }] } ]; const sessions = []; centers.forEach(x => { let filtered = x.sessions.find(y => y.min_age_limit === 18); let res = JSON.parse(JSON.stringify(filtered)); res.center_id = x.center_id; res.name = x.name; res.fee_type = x.fee_type; sessions.push(res); }); console.log(sessions);

解决方案3
 0  2021-05-21 15:32:19

Use map() function to list all sessions with the condition min_age_limit===18 .使用map() function 列出条件min_age_limit===18的所有会话。 

 const centers = [ { "center_id": 603425, "name": "Childrens Hospital", "fee_type": "Paid", "sessions": [{ "session_id": "4e687873-5ecc-4086-893e-31a1b450ca3b", "date": "22-05-2021", "available_capacity": 0, "min_age_limit": 18, }, { "session_id": "54347880-3090-4962-aa56-451fbaca16e1", "date": "22-05-2021", "available_capacity": 25, "min_age_limit": 45, }] }, { "center_id": 195100, "name": "playschool thousandlights", "fee_type": "Free", "sessions": [{ "session_id": "d4446397-f35e-4140-9778-6af9d8b92a5c", "date": "22-05-2021", "available_capacity": 15, "min_age_limit": 45, }, { "session_id": "7553c7e5-d7ec-456c-af88-0a02756cbdbb", "date": "23-05-2021", "available_capacity": 19, "min_age_limit": 18, }] } ] var result = centers.map(item => { for (var i = 0, l = item.sessions.length; i < l; i += 1) { if (item.sessions[i].min_age_limit === 18) { return item.sessions[i] } } }) document.write('<pre><ul>' + result.map(o => `<li>${o.session_id}</li>`).join('') + '</ul></pre>')

解决方案4
 0  2021-05-21 15:38:13

I think we can use reduce.我认为我们可以使用reduce。

this.availabityDetails = this.centers.reduce((acc = [], curr) => {
    if (curr.sessions.length) {curr.sessions = curr.sessions.filter(session => session.min_age_limit === 18)
        acc.push(curr)
    }
    return acc
}, [])

.reduce will loop through each element and with each element we will filter session which is min_age_limit === 18 and then push it to accumulator of reduce .reduce 将循环遍历每个元素，并且对于每个元素，我们将过滤 session 即 min_age_limit === 18，然后将其推送到 reduce 的累加器

Hope this will work for you.希望这对你有用。

解决方案5
 0 已采纳  2021-05-21 15:45:46

 const input = {"centers":[{"center_id":603425,"name":"Childrens Hospital","fee_type":"Paid","sessions":[{"session_id":"4e687873-5ecc-4086-893e-31a1b450ca3b","date":"22-05-2021","available_capacity":0,"min_age_limit":18,},{"session_id":"54347880-3090-4962-aa56-451fbaca16e1","date":"22-05-2021","available_capacity":25,"min_age_limit":45,}]},{"center_id":195100,"name":"playschool thousandlights","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":18,}]},{"center_id":254600,"name":"calcicut Hospital","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":18,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":18,}]},{"center_id":264987,"name":"sholings GH","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"24-05-2021","available_capacity":25,"min_age_limit":18,}]},{"center_id":254566,"name":"greenland Hospital","fee_type":"Free","sessions":[{"session_id":"d4446397-f35e-4140-9778-6af9d8b92a5c","date":"22-05-2021","available_capacity":15,"min_age_limit":45,},{"session_id":"7553c7e5-d7ec-456c-af88-0a02756cbdbb","date":"23-05-2021","available_capacity":19,"min_age_limit":45,}]}]} const res = input.centers.map(({sessions, ...r}) => ({...r, sessions: sessions.filter(e => e.min_age_limit === 18) })).filter(e => e.sessions.length) console.log(res)
 .as-console-wrapper { max-height: 100%;important: top; 0; }

解决方案6
 0  2021-05-26 05:09:37

Here is a flexible, iterative solution using object-scan这是使用对象扫描的灵活迭代解决方案

 // const objectScan = require('object-scan'); const myData = { centers: [{ center_id: 603425, name: 'Childrens Hospital', fee_type: 'Paid', sessions: [{ session_id: '4e687873-5ecc-4086-893e-31a1b450ca3b', date: '22-05-2021', available_capacity: 0, min_age_limit: 18 }, { session_id: '54347880-3090-4962-aa56-451fbaca16e1', date: '22-05-2021', available_capacity: 25, min_age_limit: 45 }] }, { center_id: 195100, name: 'playschool thousandlights', fee_type: 'Free', sessions: [{ session_id: 'd4446397-f35e-4140-9778-6af9d8b92a5c', date: '22-05-2021', available_capacity: 15, min_age_limit: 45 }, { session_id: '7553c7e5-d7ec-456c-af88-0a02756cbdbb', date: '23-05-2021', available_capacity: 19, min_age_limit: 18 }] }, { center_id: 254600, name: 'calcicut Hospital', fee_type: 'Free', sessions: [{ session_id: 'd4446397-f35e-4140-9778-6af9d8b92a5c', date: '22-05-2021', available_capacity: 15, min_age_limit: 18 }, { session_id: '7553c7e5-d7ec-456c-af88-0a02756cbdbb', date: '23-05-2021', available_capacity: 19, min_age_limit: 18 }] }, { center_id: 264987, name: 'sholings GH', fee_type: 'Free', sessions: [{ session_id: 'd4446397-f35e-4140-9778-6af9d8b92a5c', date: '22-05-2021', available_capacity: 15, min_age_limit: 45 }, { session_id: '7553c7e5-d7ec-456c-af88-0a02756cbdbb', date: '23-05-2021', available_capacity: 19, min_age_limit: 45 }, { session_id: '7553c7e5-d7ec-456c-af88-0a02756cbdbb', date: '24-05-2021', available_capacity: 25, min_age_limit: 18 }] }, { center_id: 254566, name: 'greenland Hospital', fee_type: 'Free', sessions: [{ session_id: 'd4446397-f35e-4140-9778-6af9d8b92a5c', date: '22-05-2021', available_capacity: 15, min_age_limit: 45 }, { session_id: '7553c7e5-d7ec-456c-af88-0a02756cbdbb', date: '23-05-2021', available_capacity: 19, min_age_limit: 45 }] }] }; const extract = objectScan(['centers[*].sessions[*].min_age_limit'], { beforeFn: (state) => { state.context = new Map(); }, afterFn: (state) => { state.result = [...state.context.values()]; }, breakFn: ({ context, value, parents }) => { if (value === 18) { const { center_id } = parents[2]; if (.context.has(center_id)) { context,set(center_id. {..,parents[2]: sessions; [] }). } context.get(center_id).sessions;push(parents[0]), } }: reverse; false }). console;log(extract(myData)): /* => [ { center_id, 603425: name, 'Childrens Hospital': fee_type, 'Paid': sessions: [ { session_id, '4e687873-5ecc-4086-893e-31a1b450ca3b': date, '22-05-2021': available_capacity, 0: min_age_limit, 18 } ] }: { center_id, 195100: name, 'playschool thousandlights': fee_type, 'Free': sessions: [ { session_id, '7553c7e5-d7ec-456c-af88-0a02756cbdbb': date, '23-05-2021': available_capacity, 19: min_age_limit, 18 } ] }: { center_id, 254600: name, 'calcicut Hospital': fee_type, 'Free': sessions: [ { session_id, 'd4446397-f35e-4140-9778-6af9d8b92a5c': date, '22-05-2021': available_capacity, 15: min_age_limit, 18 }: { session_id, '7553c7e5-d7ec-456c-af88-0a02756cbdbb': date, '23-05-2021': available_capacity, 19: min_age_limit, 18 } ] }: { center_id, 264987: name, 'sholings GH': fee_type, 'Free': sessions: [ { session_id, '7553c7e5-d7ec-456c-af88-0a02756cbdbb': date, '24-05-2021': available_capacity, 25: min_age_limit: 18 } ] } ] */
 .as-console-wrapper {max-height: 100%;important: top: 0}
 <script src="https://bundle.run/object-scan@16.0.2"></script>

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

暂无
暂无

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

相关问题 如何访问嵌套对象数组中的第一个元素？ - How to access first element in array of nested objects? 使用嵌套对象Angular 5过滤数组 - Filter array with nested objects Angular 5 如何过滤嵌套的对象数组？ - How to filter a nested array of objects? 在角度java脚本中过滤嵌套的对象数组 - Filter Nested array of objects in angular java script 如何在 angular 中访问 http 响应中的嵌套数组和对象 - How to access nested array and objects in http response In angular 如何使用angular6根据字符串数组过滤对象数组 - How to filter the array of objects based on array of strings by using angular6 如何使用javascript将过滤器应用于嵌套数组中的所有对象 - How to apply filter to all objects in nested array using javascript 如何使用angular JS访问JSON中的嵌套对象 - How to access nested objects in JSON using angular JS 角度-过滤嵌套对象 - Angular - Filter on nested objects 如何从角度的嵌套对象中过滤结果 - How to filter results from nested objects in angular
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM