鉴于产品位于两个单独的 json 文件中，如何使用 jquery 根据类别过滤产品？

Question

好吧，这对我来说有点棘手。我有两个 json 文件，food.json 和 rest_category.json。我试图找到一种方法来根据 rest_category.json 中的类别过滤 food.json 中的食物。我有一个想法，也许我应该在 food.json 中添加一个与 rest_category.json 中的类别中的 id 匹配的 foreign_id。不过，我该如何从那里开始？有没有办法我可以尝试这个？我真的很感激。谢谢 下面是我的 food.json 和 rest_category.json 的示例。食物.json

[

{

    "id":"1",

    "Name":"Coke 500ml",

    "Price":"80",

    "Quantity": "50",

    "Category":"Beverages"

},

{

    "id":"2",

    "Name":"Cake",

    "Price":"150",

    "Quantity": "40",

    "Category":"Appetizer"

},

{

    "id":"3",

    "Name":"Beef Ribs",

    "Price":"100",

    "Quantity": "50",

    "Category":"Side Items"

},

{

    "id":"4",

    "Name":"Cabbage Salad",

    "Price":"50",

    "Quantity": "30",

    "Category":"Salads"

},

{

    "id":"5",

    "Name":"Cake",

    "Price":"150",        

    "Quantity": "30",

    "Category":"Appetizer"

},

{

    "id":"6",

    "Name":"Beef Ribs",

    "Price":"100",

    "Quantity": "30",

    "Category":"Side Items"

}

]

rest_category.json

[

{

    "id" : "1",

    "name" : "Appetizers",

    "Status" : "Active"   

},

{

    "id" : "2",

    "name" : "Salads",

    "Status" : "Active"         

},

{

    "id" : "3",

    "name" : "Entrees",

    "Status" : "Active"    

},

{

    "id" : "4",

    "name" : "Side Items",

    "Status" : "Active"    

},

{

    "id" : "5",

    "name" : "Beverages",

    "Status" : "Active" 

}

]

补充一点，响应应该显示在 HTML 页面上。我目前能够附加类别和食物的列表。卡在过滤器部分。下面是我用来附加类别和食物的示例代码。

Answer 1

只需使用Array.map和Array.filter：let products = [{    "id":"1",    "Name":"Coke 500ml",    "Price":"80",    "Quantity": "50",    "Category":"Beverages"},{    "id":"2",    "Name":"Cake",    "Price":"150",    "Quantity": "40",    "Category":"Appetizer"},{    "id":"3",    "Name":"Beef Ribs",    "Price":"100",    "Quantity": "50",    "Category":"Side Items"},{    "id":"4",    "Name":"Cabbage Salad",    "Price":"50",    "Quantity": "30",    "Category":"Salads"},{    "id":"5",    "Name":"Cake",    "Price":"150",            "Quantity": "30",    "Category":"Appetizer"},{    "id":"6",    "Name":"Beef Ribs",    "Price":"100",    "Quantity": "30",    "Category":"Side Items"}];let categories = [{    "id" : "1",    "name" : "Appetizers",    "Status" : "Active"   },{    "id" : "2",    "name" : "Salads",    "Status" : "Active"         },{    "id" : "3",    "name" : "Entrees",    "Status" : "Active"    },{    "id" : "4",    "name" : "Side Items",    "Status" : "Active"    },{    "id" : "5",    "name" : "Beverages",    "Status" : "Active" }];let result = categories.map(c=>{  return {    ...c,    products : products.filter(p=>p.Category===c.name)  }})console.log(JSON.stringify(result,null,2));

Answer 2

您应该尝试使用Array.filter()方法：const arr = [  {    "id": "1",    "Name": "Coke 500ml",    "Price": "80",    "Quantity": "50",    "Category": "Beverages"  },  {    "id": "2",    "Name": "Cake",    "Price": "150",    "Quantity": "40",    "Category": "Appetizer"  },  {    "id": "3",    "Name": "Beef Ribs",    "Price": "100",    "Quantity": "50",    "Category": "Side Items"  },  {    "id": "4",    "Name": "Cabbage Salad",    "Price": "50",    "Quantity": "30",    "Category": "Salads"  },  {    "id": "5",    "Name": "Cake",    "Price": "150",    "Quantity": "30",    "Category": "Appetizer"  },  {    "id": "6",    "Name": "Beef Ribs",    "Price": "100",    "Quantity": "30",    "Category": "Side Items"  }];function filterArrayByCategory(category) {  return arr.filter(el => el.Category === category);}console.log(filterArrayByCategory('Appetizer'));