Lodash - 搜索项目然后删除 object 中不匹配的其他项目

Question

I have this multidimensional array and I am doing a search and extracting them.

This is what my object looks like:

[
   {
      "id":1,
      "name":"Hot Drinks",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":1,
            "name":"Brewed Coffee",
            "price":"90.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":2,
            "name":"Drip Coffee",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":3,
            "name":"Cappuccino",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":4,
            "name":"Caffe Latte",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":5,
            "name":"Caffe Mocha",
            "price":"120.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         }
      ]
   },
   {
      "id":2,
      "name":"Cold Drinks",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":6,
            "name":"Iced Coffee",
            "price":"110.00",
            "category_id":2,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":7,
            "name":"Iced Latte",
            "price":"120.00",
            "category_id":2,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":8,
            "name":"Iced Mocha",
            "price":"140.00",
            "category_id":2,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         }
      ]
   },
   {
      "id":3,
      "name":"Beverages",
      "created_at":null,
      "updated_at":null,
      "menus":[
         
      ]
   },
   {
      "id":4,
      "name":"Starters",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":9,
            "name":"Sizzling Sisig",
            "price":"129.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":10,
            "name":"Lumpia Shanghai",
            "price":"149.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":11,
            "name":"Pork & Shrimp Siomai",
            "price":"169.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":12,
            "name":"Spicy Tok Ramen",
            "price":"159.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":14,
            "name":"Humba Rice Meal",
            "price":"110.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":15,
            "name":"Siomai Rice Meal",
            "price":"110.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":16,
            "name":"Sisig Rice Meal",
            "price":"110.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":18,
            "name":"Suman (Pack of 6)",
            "price":"110.00",
            "category_id":4,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         }
      ]
   },
   {
      "id":5,
      "name":"Rice Meals",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":13,
            "name":"Humba Rice Meal",
            "price":"110.00",
            "category_id":5,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":17,
            "name":"Suman & Hot Choco",
            "price":"140.00",
            "category_id":5,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         }
      ]
   },
   {
      "id":6,
      "name":"Desserts",
      "created_at":null,
      "updated_at":null,
      "menus":[
         
      ]
   }
]

This is how i do a search on the menus object.

_.filter(this.originalMenus, {menus: [{name: _this.search}] });

The problem with this code is that if I searched "Brewed Coffee", it gets the entire menus object instead of just the menus object with just the "Brewed Coffee" that matches. So the returned result is like this, which is wrong:

[
   {
      "id":1,
      "name":"Hot Drinks",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":1,
            "name":"Brewed Coffee",
            "price":"90.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":2,
            "name":"Drip Coffee",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":3,
            "name":"Cappuccino",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":4,
            "name":"Caffe Latte",
            "price":"100.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
         {
            "id":5,
            "name":"Caffe Mocha",
            "price":"120.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         }
      ]
   }
]

As you can see it included the other menu items which the Brewed Coffee belongs.

How can I extract it that it looks like this:

[
   {
      "id":1,
      "name":"Hot Drinks",
      "created_at":null,
      "updated_at":null,
      "menus":[
         {
            "id":1,
            "name":"Brewed Coffee",
            "price":"90.00",
            "category_id":1,
            "deleted_at":null,
            "created_at":null,
            "updated_at":null
         },
      ]
   }
]

Apologies if I didn't explain it properly.

Another help if you can include it in your answer is that how can I do a search that partially matches the search, something like LIKE %search% in MySQL.

Your help is greatly appreciated. Thank you.

Answer 1

When use like this

_.filter(this.originalMenus, {menus: [{name: _this.search}] });

It will return all the object inside this.originalMenus if {menus: [{name: _this.search}] } gets passed.

Basicaly it's filtering this.originalMenus when {menus: [{name: _this.search}] } gets passed, it's not filtering inner menus, inner menus are used as condition to filter the menu.

so you might need to create a own filtering logic

EX:

function filterCofee(search) {
  const filterdMenus = [];

  menus.forEach(menu => {
    // check if there's sub menus that we can filter.
    var filterdMenu = _.filter(menu.menus, { name: search });    

    // if there's matches, then we will add it a array, and return it.
    if (filterdMenu.length > 0) {
      filterdMenus.push({
        ...menu,
        menus: [...filterdMenu]
      });
    }
  });

  return filterdMenus;
}

filterCofee("Brewed Coffee")

demo

---

and if you want to use it like LIKE %search% , then replace the above filter with

// Here we are checking if the search text included in any of the name at any position.
var filterdMenu = _.filter(menu.menus, (m) => m.name.indexOf(search) >= 0);

demo

Answer 2

You may also consider simply using plain vanilla Javascript

 const allMenus = [{ "id": 1, "name": "Hot Drinks", "created_at": null, "updated_at": null, "menus": [{ "id": 1, "name": "Brewed Coffee", "price": "90.00", "category_id": 1, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 2, "name": "Drip Coffee", "price": "100.00", "category_id": 1, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 3, "name": "Cappuccino", "price": "100.00", "category_id": 1, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 4, "name": "Caffe Latte", "price": "100.00", "category_id": 1, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 5, "name": "Caffe Mocha", "price": "120.00", "category_id": 1, "deleted_at": null, "created_at": null, "updated_at": null } ] }, { "id": 2, "name": "Cold Drinks", "created_at": null, "updated_at": null, "menus": [{ "id": 6, "name": "Iced Coffee", "price": "110.00", "category_id": 2, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 7, "name": "Iced Latte", "price": "120.00", "category_id": 2, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 8, "name": "Iced Mocha", "price": "140.00", "category_id": 2, "deleted_at": null, "created_at": null, "updated_at": null } ] }, { "id": 3, "name": "Beverages", "created_at": null, "updated_at": null, "menus": [ ] }, { "id": 4, "name": "Starters", "created_at": null, "updated_at": null, "menus": [{ "id": 9, "name": "Sizzling Sisig", "price": "129.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 10, "name": "Lumpia Shanghai", "price": "149.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 11, "name": "Pork & Shrimp Siomai", "price": "169.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 12, "name": "Spicy Tok Ramen", "price": "159.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 14, "name": "Humba Rice Meal", "price": "110.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 15, "name": "Siomai Rice Meal", "price": "110.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 16, "name": "Sisig Rice Meal", "price": "110.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 18, "name": "Suman (Pack of 6)", "price": "110.00", "category_id": 4, "deleted_at": null, "created_at": null, "updated_at": null } ] }, { "id": 5, "name": "Rice Meals", "created_at": null, "updated_at": null, "menus": [{ "id": 13, "name": "Humba Rice Meal", "price": "110.00", "category_id": 5, "deleted_at": null, "created_at": null, "updated_at": null }, { "id": 17, "name": "Suman & Hot Choco", "price": "140.00", "category_id": 5, "deleted_at": null, "created_at": null, "updated_at": null } ] }, { "id": 6, "name": "Desserts", "created_at": null, "updated_at": null, "menus": [ ] } ] const filterBy = (search) => allMenus.map( menu => ({...menu, menus: menu.menus.filter(({ name }) => name.includes(search)) }) ).filter(({menus}) => menus.length > 0) console.log(filterBy("Brewed Coffee"))

Answer 3

So _.filter is going to return true or false for every element in an array and return the array. Because you are filter your top level menus ("Hot Drinks", "Cold Drinks"), the whole thing will be return there if it matches your predicate.

You may be better off using the es6 .map function and passing in your own custom function to filter and map the object as you want it to. The .map or .filter functions are also where you'd be able to do your own logic for partial matches like you were asking.

Otherwise you can do the following to essentially use lodash to do the filter, then use .map to remove the extra items from the menus array.

var filtered = _.filter(this.originalMenus, {menus: [{name: _this.search}] });
filtered.map(function(m,i){m.menus = _.filter(m.menus,{name: _this.search});

but I'd recommend something more along the lines of just using the .filter and .map functions like this

var filtered = originalMenus.filter((topMenu)=> 
    topMenu.menus.filter((sub)=>
        sub.name.toLowerCase().includes(search.toLowerCase())).length > 0)
    .map((m)=>
        {return {...m, ...{menus:m.menus.filter((f)=>f.name.toLowerCase().includes(search.toLowerCase()))}}}
    )