时间戳

首页 > 解决方案 > 鉴于产品位于两个单独的 json 文件中，如何使用 jquery 根据类别过滤产品？

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

问题描述

好吧，这对我来说有点棘手。我有两个 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 页面上。我目前能够附加类别和食物的列表。卡在过滤器部分。下面是我用来附加类别和食物的示例代码。

// 显示来自 json 文件的产品

$(document).ready(function() {
$.getJSON("../json/food.json", function(data) {
    var food_data = '';
    $.each(data, function(key, value) {
        food_data += '<div id = "product_sect" class = "product">'
        food_data += '<a href = "#"> <img class = "food-image" src = 
"../images/dinner.svg"></a>'
        food_data += '<p style = "margin:0;" id = "FoodName">' + 
value.Name + '<p class = "p_quantity" id = FoodQuantity>' + 'Qty:' + 
value.Quantity + '</p>' + '<p class = "p_price" id = "FoodPrice">' +  
value.Price + "/=" + '</p>' + '</p>'
        food_data += '<a id = "cart-click" class = "btn btn-primary add- 
        to-cart" href = "#" data-id= + "'+value.ID+'">Add to Cart</i></a>'
        food_data += '</div>'

    });
    $('#product_grid').append(food_data)
});

});

//显示来自json文件的类别

$(document).ready(function() {
$.getJSON("../json/rest_category.json", function(data) {
    var cat_data = '';
    $.each(data, function(key, value) {
        cat_data += '<a href = "#">' + value.name + '</a>'
    });
    $('#rest_category').append(cat_data)
});
});

标签： javascriptjquery

解决方案

您应该尝试使用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'));

推荐阅读