代码审查：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:

• Vue/Javascript filter in deep object inside object array
• Deep filter objects in javascript array

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

Thanks for your help!

Answer 1

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.

Answer 2

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"));

Answer 3

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;
    }, []);