3

Say I have an array of objects that follows the pattern below:

var posts = [
    {
        title: post_ab,
        category_array : [
            { id: 1, slug: category-a },
            { id: 2, slug: category-b }
        ]
    },
    {
        title: post_ac,
        category_array : [
            { id: 1, slug: category-a },
            { id: 3, slug: category-c }
        ]
    },
    {
        title: post_bc,
        category_array : [
            { id: 2, slug: category-b },
            { id: 3, slug: category-c }
        ]
    }
]

I'm trying to filter the above array, and only return values where the category_array contains a slug matching a specified value.

For example, if I wanted to filter against 'category-c', only the 2nd and 3rd values (post_ac and post_bc) would be returned.

I've tried with nested filters, which is getting me nowhere:

var currentCategory = 'category-b';

var filteredPosts = function( posts ) {
    return posts.filter( function( post ){
        return post.category_array.filter( function( category ){
            return category.slug === currentCategory;
        })
    })
}
Improve this question
1
  • 1
    Change that inner filter to Array#some, e.g. post.category_array.some and it should work fine. Commented Apr 26, 2017 at 10:39

5 Answers 5

Reset to default
6

You have to use Array.prototype.some() in the inner loop:

var filteredPosts = function(posts) {
    return posts.filter(function(post){
        return post["category_array"].some(function(category){
            return category.slug === currentCategory;
        });
    });
}

It will return a boolean result that can be used in the .filter() callback.

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

3 Comments

Nailed it - thank you. Although the above example gives a syntax error (my fault for not wrapping the titles in quotes).
You are welcome. Yes it is an error in the JS array.
Accepted as it sticks to my antiquated JS syntax.
2

Let's combine some with filter

var posts = [
        {
            title: 'post_ab',
            category_array : [
                { id: 1, slug: 'category-a' },
                { id: 2, slug: 'category-b' }
            ]
        },
        {
            title: 'post_ac',
            category_array : [
                { id: 1, slug: 'category-a' },
                { id: 3, slug: 'category-c' }
            ]
        },
        {
            title: 'post_bc',
            category_array : [
                { id: 2, slug: 'category-b' },
                { id: 3, slug: 'category-c' }
            ]
        }
    ];
    var result = posts.filter(a => a.category_array.some(cat => cat.slug.includes('a')));
    console.log(result);

Improve this answer

1 Comment

Using arrow functions renders those return statements a bit redundant. posts.filter(a => a.category_array.some(cat => cat.slug.includes('a'))). Otherwise, looks nice.
0

You can use Array.prototype.some

posts.filter(
  (elem) => (
    elem.category_array.some(
      elem => elem.slug === currentCategory;
    )
  )
)
Improve this answer

Comments

0

You can make a Array.prototype.find() to get first element with slug equal to 'category-b' in the array category_array and returning that element if exists will be evaluated as truthy, or falsey if not exist, by the Array.prototype.filter():

var posts = [{title: 'post_ab',category_array : [{ id: 1, slug: 'category-a' },{ id: 2, slug: 'category-b' }]},{title: 'post_ac',category_array : [{ id: 1, slug: 'category-a' },{ id: 3, slug: 'category-c' }]},{title: 'post_bc',category_array : [{ id: 2, slug: 'category-b' },{ id: 3, slug: 'category-c' }]}],
    currentCategory = 'category-b',
    result = posts.filter(function (p) {
      // Return only the very first element found
      return p.category_array.find(function (c) {
        return currentCategory === c.slug;
      });
    });

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

Improve this answer

3 Comments

Thanks - definitely more in-line with my approach - but the use of Array.some in a few of the other answers is a bit more elegant, IMO.
@YosvelQuintero I didn't either up/downvote, and it probably doesn't matter for small datasets, but filtering twice will iterate both datasets twice when there is no need. some, indexOf, includes would all only iterate until the match was found.
@CodingIntrigue it is performance because another filter will iterate over all the array.. Agree!. Now updated the answer to use Array.prototype.find() that will return the very first element found.. Thanks for your comment
-2

Replace your inner filter with some()

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.