Code review: Deep filter array of objects concisely in Javascript

Question

I've been trying to wrap my head around filtering arrays of objects for a while now, but I can't seem to really get a hang on it. Although I usually have working code in the end, it just doesn't look like elegant code to me. So, I'd appreciate a code review and some hints very much!

Example: I'm currently working on this example for an online shop where I need to retrieve product details out of an array of objects based on an id.

This is my helper function:

function getItemDetails(id) {
        var getCategory = shelf.filter(obj => obj.articleList.some(cat => cat.id === id));
        var getArticleList = getCategory[0].articleList;
        var getItem = getArticleList.filter(item => item.id == id);
        return getItem 
}

Steps: In a first step, I tried to filter the shelf array, but it would return the entire array articleList of the corresponding item.

So, I filtered the result again with the same criteria and it works, but it just looks awfully redundant to me.

This is an example of the data:

const shelf = [{
    "categoryPrice": "2",
    "categoryTitle": "Flyer",
    "articleList": [{
        "id": "1",
        "articleTitle": "Green",
    }, {
        "id": "2",
        "articleTitle": "Blue",
    }],
}, {
    "categoryPrice": "3",
    "categoryTitle": "Post card",
    "articleList": [{
        "id": "3",
        "articleTitle": "Purple"
    }, {
        "id": "4",
        "articleTitle": "Yellow",
    }]
}]

I checked various questions here, including:

But none of them provide an easier, more concise solution, in my opinion. What am I missing?

Thanks for your help!

How often do you filter, do you want your code optimized for (search time) performance or memory (no helper objects)? — Akxe
– Akxe, Commented Dec 4, 2020 at 10:53
I use this helper function all over the template to retrieve article names, prices, etc. - quite often I would say. — Wolfgang Wohlwend
– Wolfgang Wohlwend, Commented Dec 4, 2020 at 10:55

Jim Nilsson · Accepted Answer · 2020-12-04 11:01:48Z

4

This might be a better fit for codereview but if the question is just 'How to make this more concise' I would suggest something like following:

const shelf = [{
  "categoryPrice": "2",
  "categoryTitle": "Flyer",
  "articleList": [{
    "id": "1",
    "articleTitle": "Green",
  }, {
    "id": "2",
    "articleTitle": "Blue",
  }],
}, {
  "categoryPrice": "3",
  "categoryTitle": "Post card",
  "articleList": [{
    "id": "3",
    "articleTitle": "Purple"
  }, {
    "id": "4",
    "articleTitle": "Yellow",
  }]
}]

const findItem = function(shelves, id) {
  return shelves.flatMap((shelf) => shelf.articleList).find((article) => article.id == id) || null;
}

console.log(findItem(shelf, 1));
console.log(findItem(shelf, 3));

The above example concatenate all the list of articles and then searches that array for the article with the supplied ID.

Performance wise? Not the best, but you asked for something concise and this is about as concise as one can hope for with the given data structure.

answered Dec 4, 2020 at 11:01

Jim Nilsson

8824 silver badges12 bronze badges

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

3 Comments

Wolfgang Wohlwend Over a year ago

This is great, thanks a lot! Just out of curiosity, what would you suggest performance wise? Thanks also for the hint with codereview.stackexchange.com - I will keep it in mind for next time!

Jim Nilsson Over a year ago

Performance wise the best thing would probably be to have all the articles in a lookup table. But given how the data structure in the example is, it is what it is. It might be faster to use nested loops rather than first concatenating all article arrays but it would have to benchmarked to know for sure.

Akxe Over a year ago

@JimNilsson Performance wise, it will be on par after the first search through... Every search after the first is better, but on the other hand... it will use more memory... see my answer

Akxe · Accepted Answer · 2020-12-04 15:50:47Z

This code is O(1), which means that lookup per article.id is constant. It will however use more memory. To conserve memory, I used WeakMap, as long as you use the same shelf variable, it will not recompute it. But once you replace it, it will also perish from the cache.

const shelf = [{
  "categoryPrice": "2",
  "categoryTitle": "Flyer",
  "articleList": [{
    "id": "1",
    "articleTitle": "Green",
  }, {
    "id": "2",
    "articleTitle": "Blue",
  }, {
    "id": "3",  //  Added
    "articleTitle": "Violet",
  }],
}, {
  "categoryPrice": "3",
  "categoryTitle": "Post card",
  "articleList": [{
    "id": "3",
    "articleTitle": "Purple"
  }, {
    "id": "4",
    "articleTitle": "Yellow",
  }],
}];

const findItems = function(shelves, id) {
  if (!findItems._map) {
    // Create computation cache holder
    // Weak map will make sure, that if the object is disposed, it can be garbage collected, with it will be gone its cache too! (That is awsome!)
    findItems._map = new WeakMap();
  }
  if (!findItems._map.has(shelves)) {
    // For every shelves object, we will create a new Map containing all mapped values.
    const map = new Map();
    findItems._map.set(shelves, map);
    shelves.forEach(shelf => {
      shelf.articleList.forEach(article => {
        if (!map.has(article.id)) {
          // If list is not yet created create it with the article
          return map.set(article.id, [ article ]);
        }
        
        // If it exists, add to it
        map.get(article.id).push(article);
      });
    });
  }

  return findItems._map.get(shelves).get(id);
}

console.log(findItems(shelf, "1"));
console.log(findItems(shelf, "3"));

Jonathan Irwin · Accepted Answer · 2020-12-04 12:18:11Z

0

You can get away with looping twice. Once for the outer array and once for the articleList array

const findItem = (id) =>
    shelf.reduce((acc, current) => {
        const found = current.articleList.find((x) => x.id === id);
        if (found) return [...acc, found];
        return acc;
    }, []);

answered Dec 4, 2020 at 12:18

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Collectives™ on Stack Overflow

Code review: Deep filter array of objects concisely in Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related