filtering an array inside an array of objects

Question

I have an array that looks something like this

var categorizedBooks = [
{
 name: "category1",
 books:[
        {name:"book1", bookContainerId: 1, active: true},
        {name:"book2", bookContainerId: 2, active: false},
        {name:"book3", bookContainerId: 2, active: true},
       ]
 },
{
 name: "category2",
 books:[
        {name:"book4", bookContainerId: 1, active: false},
        {name:"book5", bookContainerId: 3, active: true},
        {name:"book6", bookContainerId: 4, active: true},
       ]
 },
{
 name: "category3",
 books:[
        {name:"book7", bookContainerId: 1, active: false},
        {name:"book8", bookContainerId: 2, active: true},
        {name:"book9", bookContainerId: 4, active: false},
       ]
 },
{
 name: "category4",
 books:[
        {name:"book10", bookContainerId: 2, active: false},
        {name:"book11", bookContainerId: 2, active: false},
        {name:"book12", bookContainerId: 4, active: false},
       ]
 }

And i want to filter them on two arrays that looks something like this:

bookContainers: [1,3]
isActive: ['active', 'inactive] // an array of strings

These comes from inputs so it can change whenever. So i want to match bookContainers with their bookContainerId, and 'active'/'inactive' string array with their boolean active property and if a an object in categorizedBooks books array is empty i want to remove it.

So in this case i would get something like this (Desired output from the above):

{
 name: "category1",
 books:[
        {name:"book1", bookContainerId: 1, active: true}
       ]
 },
{
 name: "category2",
 books:[
        {name:"book4", bookContainerId: 1, active: false},
        {name:"book5", bookContainerId: 3, active: true}
       ]
 },
{
 name: "category3",
 books:[
        {name:"book7", bookContainerId: 1, active: false}
       ]
 }

Another problem is that i don't want to modify the original array because i want to be able to call it with new arrays to filter on whenever, and get the result. Here is my GET method now:

public get bookCategories(): Array<CategorizedBook> {
    let cloneToMapOf = [...this.categoriesAndBooks];

    const filteredCategories = cloneToMapOf.map(categorizedbooks => {
        categorizedbooks.books = categorizedbooks.properties.filter(book =>{
            return (rc.includes(books.bookContainerId) && 
sa.includes(book.active ? 'active' : 'inactive'));
        });
        return categorizedbooks;
    });

    const result = filteredCategories.filter(x => x.books.length > 0 && x.books != null);
    return result;
}

But for some reason this code modifies this.categoriesAndBooks so I becomes empty after time..

with the result I want to present in some HTML

    <nz-collapse [nzBordered]="false" *ngFor="let categorizedBook of bookCategories;">
        <nz-collapse-panel [nzHeader]="categorizedBook.name" [nzActive]="true">
            <ng-container *ngFor="let book of categorizedBook.properties; trackBy:trackBy.book">
                <ng-template [ngTemplateOutlet]="bookEditors" [ngTemplateOutletContext]="{book: book, form: bookValueForm}"></ng-template>
            </ng-container>
        </nz-collapse-panel>
    </nz-collapse>

I've been sitting with this for hours.. please help me

I did not understand the 'active' inactive part, can you explain it better ? — Dhananjai Pai
– Dhananjai Pai, Commented Oct 9, 2019 at 19:42
this is not clear could you please put the desired output and what did you tried — Aziz.G
– Aziz.G, Commented Oct 9, 2019 at 19:44
It's basically an array of strings that need to match the boolean true => 'active' — LittleMygler
– LittleMygler, Commented Oct 9, 2019 at 19:44
@G.aziz The desired output is there, i can add what I've tried. — LittleMygler
– LittleMygler, Commented Oct 9, 2019 at 19:45
@LittleMygler edit your and add th output you want to get from this obeject — Aziz.G
– Aziz.G, Commented Oct 9, 2019 at 19:45

Dhananjai Pai · Accepted Answer · 2019-10-09 20:31:23Z

1

Update

const filteredCategories = cloneToMapOf.map(categorizedbooks => {
        const books = categorizedbooks.properties.filter(book =>{
            return (rc.includes(books.bookContainerId) && 
sa.includes(book.active ? 'active' : 'inactive'));
        });
        return {...categorizedbooks,books}; // so that original array is not mutated.
    });

I have created a inner filter for books that are part of the container AND active state is one of the states in active array and then an outer filter for categories with empty book array

var categorizedBooks = [
{
 name: "category1",
 books:[
        {name:"book1", bookContainerId: 1, active: true},
        {name:"book2", bookContainerId: 2, active: false},
        {name:"book3", bookContainerId: 2, active: true},
       ]
 },
{
 name: "category2",
 books:[
        {name:"book4", bookContainerId: 1, active: false},
        {name:"book5", bookContainerId: 3, active: true},
        {name:"book6", bookContainerId: 4, active: true},
       ]
 },
{
 name: "category3",
 books:[
        {name:"book7", bookContainerId: 1, active: false},
        {name:"book8", bookContainerId: 2, active: true},
        {name:"book9", bookContainerId: 4, active: false},
       ]
 },
{
 name: "category4",
 books:[
        {name:"book10", bookContainerId: 2, active: false},
        {name:"book11", bookContainerId: 2, active: false},
        {name:"book12", bookContainerId: 4, active: false},
       ]
 }
 ];
var bookContainers = [1,3]
var isActive = ['active', 'inactive'];

var isActiveBoolState = isActive.map(state => state === 'active'); // helper to show which type of active state should be showed.

var result = categorizedBooks.map(category => ({...category, books: category.books.filter(book => bookContainers.includes( book.bookContainerId) && isActiveBoolState.includes(book.active)  )})).filter(category => category.books.length);

console.log(result);

edited Oct 9, 2019 at 20:31

answered Oct 9, 2019 at 19:53

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

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

5 Comments

3limin4t0r Over a year ago

state === 'active' ? true : false is an anti-pattern, use state === 'active' instead.

Dhananjai Pai Over a year ago

updated, not sure if it is an anti-pattern though, thought it would be more readable. but it makes sense not to add the obvious

LittleMygler Over a year ago

Problem with this is it makes a recursive thing with my html so it just runs and runs, check update for how i use it :)

LittleMygler Over a year ago

I gets stuck in a recursive get, where the data updates and it fetches it again

Dhananjai Pai Over a year ago

@LittleMygler use the spread operator like I did in my answer. In your answere you are mutating the original object inside the array!

Nina Scholz · Accepted Answer · 2019-10-09 20:17:25Z

You could take the wanted keys in an array and add the values instead of some semantic values which needs to be converted to data types of the object for testing.

The result is an array with a filtered sub array and reassembled if the sub array contains some elements.

var categorizedBooks = [{ name: "category1", books: [{ name: "book1", bookContainerId: 1, active: true }, { name: "book2", bookContainerId: 2, active: false }, { name: "book3", bookContainerId: 2, active: true }] }, { name: "category2", books: [{ name: "book4", bookContainerId: 1, active: false }, { name: "book5", bookContainerId: 3, active: true }, { name: "book6", bookContainerId: 4, active: true }] }, { name: "category3", books: [{ name: "book7", bookContainerId: 1, active: false }, { name: "book8", bookContainerId: 2, active: true }, { name: "book9", bookContainerId: 4, active: false }] }, { name: "category4", books: [{ name: "book10", bookContainerId: 2, active: false }, { name: "book11", bookContainerId: 2, active: false }, { name: "book12", bookContainerId: 4, active: false }] }],
    filters = [['bookContainerId', [1, 3]], ['active', [true, false]]],
    result = categorizedBooks.reduce((r, { name, books }) => {
        books = books.filter(o => filters.every(([k, v]) => v.includes(o[k])));
        if (books.length) r.push({ name, books });
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Nice code, but this also creates a recursive pattern when added into my *ngIf for some reason

Collectives™ on Stack Overflow

filtering an array inside an array of objects

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related