Filtering an array of objects inside of an array of objects?

Question

I have the following data structure:

[
    {
        "performanceDatetime": "2020-01-28T08:00:00Z",
        "waivers": [
            {
                "ticketId": "66288",
            },
        ]
    },
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "63152",
            },
            {
                "ticketId": "66113",
            }
        ]
    },
    {
        "performanceDatetime": "2020-01-28T09:00:00Z",
        "waivers": [
            {
                "ticketId": "62667",
            },
        ]
    }
]

i.e., a list of objects. Inside these objects, there is another list: waivers. My question is, how would I filter the list waivers inside the list of objects, such that, if I filtered by, e.g., a ticketID of 63152, I'd receive the following returned:

[
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "63152",
            }
        ]
    }
]

Assuming the original data structure is stored as this.activeSurfersWaivers, I have tried the following:

const todaysWaivers = this.activeSurfersWaivers.filter((surfersWaivers) => {
    surfersWaivers.waivers.filter((surferWaiver) => {
         return (surferWaiver.ticketId.indexOf(this.searchedTicketID) >= 0);
    });
});

Which returns an empty array for a value of this.searchedTicketID of 63152. Any pro-tips on filtering this awkward data structure would be greatly appreciated!

You aren't returning anything from the first filter function! — Djave
– Djave, Commented Jan 28, 2020 at 10:25

connexo · Accepted Answer · 2020-01-28 11:23:50Z

2

This is what I would do if I had to rush it:

const data = [{
    "performanceDatetime": "2020-01-28T08:00:00Z",
    "waivers": [{
      "ticketId": "66288",
    }, ]
  },
  {
    "performanceDatetime": "2020-01-28T08:30:00Z",
    "waivers": [{
        "ticketId": "63152",
      },
      {
        "ticketId": "66113",
      }
    ]
  },
  {
    "performanceDatetime": "2020-01-28T09:00:00Z",
    "waivers": [{
      "ticketId": "62667",
    }, ]
  }
]

const idToFind = "63152";

const matchingEntries = data.filter(entry => entry.waivers.some(el => el.ticketId === idToFind));
matchingEntries.forEach(entry => entry.waivers = entry.waivers.filter(el => el.ticketId === idToFind));

console.log(matchingEntries);

This returns

[
  {
    "performanceDatetime": "2020-01-28T08:30:00Z",
    "waivers": [
      {
        "ticketId": "63152"
      }
    ]
  }
]

edited Jan 28, 2020 at 11:23

answered Jan 28, 2020 at 10:26

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Belmin Bedak Over a year ago

@WindUpLordVexxos that's on your side, probaby eslint config rule

Micheal J. Roberts Over a year ago

Yeh, but I can't bend my config rules unfortunately. It probably works.

Micheal J. Roberts Over a year ago

Hmmmm, ok so I jave started to use this method - but unfortunately, it returns the rest of the parent array as well...so matches inside waivers, but it doesn't return the structure in the question. Close tho!

connexo Over a year ago

As far as I can see, this returns exactly what you were asking for?

Micheal J. Roberts Over a year ago

I believe my issue was is that I had various bindings on data which were hampering the filter. I have ammended some code myside and it does indeed work.

Vijay Joshi · Accepted Answer · 2020-01-28 10:31:53Z

1

Here is how you do it:

https://codepen.io/v08i/pen/KKwYrRp

<div id="test1">
</div>
<div id="test2">
</div>

let arr = [
    {
        "performanceDatetime": "2020-01-28T08:00:00Z",
        "waivers": [
            {
                "ticketId": "66288",
            },
        ]
    },
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "63152",
            },
            {
                "ticketId": "66113",
            }
        ]
    },
    {
        "performanceDatetime": "2020-01-28T09:00:00Z",
        "waivers": [
            {
                "ticketId": "62667",
            },
        ]
    }
]

function findItem(id) {
    return arr.find((item) => {
        return item.waivers.some((waiver) => { return waiver.ticketId == id});
    });
}

document.getElementById('test1').innerHTML = JSON.stringify(findItem('63152')); 

document.getElementById('test2').innerHTML = JSON.stringify(findItem('62667')); 

console.log(findItem('63152'));
console.log(findItem('62667'));

answered Jan 28, 2020 at 10:31

Vijay Joshi

9677 silver badges17 bronze badges

5 Comments

Micheal J. Roberts Over a year ago

This is close, but it also returns the whole waivers array for me inside the parent object when a match is found.

Vijay Joshi Over a year ago

What do you want as final output?

Micheal J. Roberts Over a year ago

The example in the question. Sorry if that was not clear enough from my end.

Vijay Joshi Over a year ago

ok. so if I understand correctly, you want only matched ticketId to be present in waivers array?

Micheal J. Roberts Over a year ago

Yes, and only to have the parent performanceDateTime, inside an array.

Tim VN · Accepted Answer · 2020-01-28 10:40:39Z

1

You are actually very close. You'll want to check if the second filter yields any results:

data = [
  {
    "performanceDatetime": "2020-01-28T08:00:00Z",
    "waivers": [
      {
        "ticketId": "66288",
      },
    ]
  },
  {
    "performanceDatetime": "2020-01-28T08:30:00Z",
    "waivers": [
      {
        "ticketId": "63152",
      },
      {
        "ticketId": "66113",
      }
    ]
  },
  {
    "performanceDatetime": "2020-01-28T09:00:00Z",
    "waivers": [
      {
        "ticketId": "62667",
      },
    ]
  }
];

const filter = ticket => {
  return data.filter(entry => {
    return entry.waivers.some(waiver => waiver.ticketId === ticket)
  }).map(entry => {
    entry.waivers = entry.waivers.filter(waiver => waiver.ticketId === ticket);
    return entry;
  });
};

console.log(filter("63152"));

edited Jan 28, 2020 at 10:40

answered Jan 28, 2020 at 10:26

Tim VN

1,1931 gold badge9 silver badges19 bronze badges

2 Comments

Micheal J. Roberts Over a year ago

This is close, it returns the whole array for me inside the parent object.

Micheal J. Roberts Over a year ago

Ok it is working, but it is currently returning the other elements in the parent data array...

100PercentVirus · Accepted Answer · 2020-01-28 19:00:52Z

I hope this solution is what you are looking for. It takes care of instances where there are multiple waivers array entries.

var dataStructure = 
[
    {
        "performanceDatetime": "2020-01-28T08:00:00Z",
        "waivers": [
            {
                "ticketId": "66288",
            },
        ]
    },
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "63152",
            },
            {
                "ticketId": "66113",
            }
        ]
    },
    {
        "performanceDatetime": "2020-01-28T09:00:00Z",
        "waivers": [
            {
                "ticketId": "62667",
            },
        ]
    }
]; 

function filterDataStructureByWaiverTicketId(ticketId) 
{
    return dataStructure.filter(function (value, index, array) 
    { 
        //find index in the "waivers" array where ticketId occurs 
        var waiverIndex = value.waivers.reduce(function(a, e, i)
        {  
            if (e.ticketId === ticketId)
            {
                a.push(i);
            }  
            return a; 
        }, []); 
        if(waiverIndex.length > 0)//if a match exists 
        {   //remove everything in the "waivers" array that does not match 
            var newWaivers = value.waivers.filter(function (value, index, array)
            {  
                return value.ticketId === ticketId;
            });
            value.waivers = newWaivers;//replace the old waivers array with the new one that matches
            return value.waivers[0].ticketId === ticketId;//tadaa... 
        }  
    });
}

Usage example:

Example 1: 
var newdatastructure = filterDataStructureByWaiverTicketId("66113");/*
newdatastructure[0].performanceDatetime //returns "2020-01-28T08:30:00Z"
newdatastructure[0].waivers[0].ticketId //returns "66113"
newdatastructure //returns   
[
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "66113",
            }
        ]
    }
]*/

Example 2: 
var newdatastructure = filterDataStructureByWaiverTicketId("63152");/*
newdatastructure[0].performanceDatetime //returns "2020-01-28T08:30:00Z"
newdatastructure[0].waivers[0].ticketId //returns "63152"
newdatastructure // returns   
[
    {
        "performanceDatetime": "2020-01-28T08:30:00Z",
        "waivers": [
            {
                "ticketId": "63152",
            }
        ]
    }
]*/

Example 3: 
var newdatastructure = filterDataStructureByWaiverTicketId("66288");/*
newdatastructure[0].performanceDatetime //returns "2020-01-28T08:00:00Z"
newdatastructure[0].waivers[0].ticketId //returns "66288"
newdatastructure //returns   
[
    {
        "performanceDatetime": "2020-01-28T08:00:00Z",
        "waivers": [
            {
                "ticketId": "66288",
            }
        ]
    }
]*/

Scott Sauyet · Accepted Answer · 2020-01-28 19:47:31Z

Although these techniques are very similar to those in the answer by connexo, I find it cleaner to make a reusable function. This is what I came up with:

const matchingPerformances = (data, id) => data
  .filter (({waivers}) => waivers .some (({ticketId}) => ticketId == id))
  .reduce ((a, {waivers, ... r}) => [
    ... a, 
    {... r, waivers: waivers .filter (({ticketId}) => ticketId == id)}
  ], []) 

const data = [{performanceDatetime: "2020-01-28T08: 00: 00Z", waivers: [{ticketId: "66288"}]}, {performanceDatetime: "2020-01-28T08: 30: 00Z", waivers: [{ticketId: "63152"}, {ticketId: "66113"}]}, {performanceDatetime: "2020-01-28T09: 00: 00Z", waivers: [{ticketId: "62667"}]}]

console .log (matchingPerformances (data, "63152"))

If I wanted to clean up some duplication, I might add a helper function:

const ticketMatch = (id) => ({ticketId}) => ticketId == id

const matchingPerformances = (data, id) => data
  .filter (({waivers}) => waivers .some (ticketMatch (id)))
  .reduce ((a, {waivers, ... r}) => [
    ... a, 
    {... r, waivers: waivers .filter (ticketMatch (id))}
  ], [])

While this could be done in a single reduce call, I think that would end up being much harder code to understand.

Siva Kondapi Venkata · Accepted Answer · 2020-01-28 15:49:22Z

-1

UPDATE: Adding multiple ways to do.

Using reduce method. (find_item method)
Using for of loop. (find_item2 method)

const find_item = (arr, searchId) =>
  arr.reduce((acc, curr) => {
    const waivers = curr.waivers.filter(waiver => waiver.ticketId === searchId);
    return waivers.length > 0 ? [{ ...acc, ...curr, waivers }] : [...acc];
  }, []);


const find_item2 = (arr, searchId) => {
  for (let curr of arr) {
    const waivers = curr.waivers.filter(waiver => waiver.ticketId === searchId);
    if (waivers.length > 0) {
      return [{ ...curr, waivers }];
    }
  }
  return [];
};

const arr = [
  {
    performanceDatetime: "2020-01-28T08:00:00Z",
    waivers: [
      {
        ticketId: "66288"
      }
    ]
  },
  {
    performanceDatetime: "2020-01-28T08:30:00Z",
    waivers: [
      {
        ticketId: "63152"
      },
      {
        ticketId: "66113"
      }
    ]
  },
  {
    performanceDatetime: "2020-01-28T09:00:00Z",
    waivers: [
      {
        ticketId: "62667"
      }
    ]
  }
];
const searchId = "66113";

console.log(find_item(arr, searchId));
console.log(find_item2(arr, searchId));

edited Jan 28, 2020 at 15:49

answered Jan 28, 2020 at 11:06

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

11 Comments

Micheal J. Roberts Over a year ago

This doesn't work at all. The output should be am array as well.

Siva Kondapi Venkata Over a year ago

@WindUpLordVexxos, Got it. update answer slightly to have array as result. Hope this helps.

Micheal J. Roberts Over a year ago

Appreciate, but it is still return an empty array, even though I am searching by the correct value...

Siva Kondapi Venkata Over a year ago

@WindUpLordVexxos, Ohh very strange, are you not seeing the results when you do "Run code snippet"?

Micheal J. Roberts Over a year ago

Yeh, I am seeing that...it's just not working at all.

|

Collectives™ on Stack Overflow

Filtering an array of objects inside of an array of objects?

6 Answers 6

5 Comments

5 Comments

2 Comments

Comments

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

5 Comments

2 Comments

Comments

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related