JS过滤器内的阵列

时间：2018-11-13 05:03:56

标签： javascript arrays array-filter arrayobject

我有一个如下数组

  [{
    "id": 68,
    "proffesional_photo": "",
    "top_image": "https://sampleimage.jpg",
    "ratings": "1",
    "price": 690,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Dark Chocolate Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 4,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      },
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  },
  {
    "id": 69,
    "proffesional_photo": "",
    "top_image": "https://sampleimage2.jpg",
    "ratings": "1",
    "price": 700,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  }
  ],

当用户选择某个菜单时，需要对其进行过滤，

每个菜肴对象可能具有多个menu_id，

我尝试使用array.filter，但是在弄清楚如何从Dish array到其中的子数组进行过滤时遇到了麻烦。

我尝试的代码（filterBy = 4）

let result = data.filter(function(row) {
  row.restaurant_dish_menus.filter(function(i) {
    return i.menu_id == filterBy;
  });
});

console.log(result)给了我一个空数组。

如果filterBy is = 4的预期输出是

{
    "id": 68,
    "proffesional_photo": "",
    "top_image": "https://sampleimage.jpg",
    "ratings": "1",
    "price": 690,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Dark Chocolate Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 4,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      },
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  }

如果filterBy为3，则两个对象都应为输出

5 个答案:

答案 0 :(得分：3)

怎么样

var data =   [{
    "id": 68,
    "proffesional_photo": "",
    "top_image": "https://sampleimage.jpg",
    "ratings": "1",
    "price": 690,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Dark Chocolate Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 4,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      },
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  }];

  var result = data.filter(function(m) {
    return m.restaurant_dish_menus.some(function(d) {
      return d.menu_id === 4;
    });
  })

答案 1 :(得分：2)

.filter期望传递的函数返回布尔值。在您的情况下，该函数不返回任何内容（或undefined），这总是虚假的。

一种选择是在嵌套过滤器中使用.find，然后根据结果是否为undefined返回一个布尔值。

这是一个片段。

let data = [{
  "id": 68,
  "proffesional_photo": "",
  "top_image": "https://sampleimage.jpg",
  "ratings": "1",
  "price": 690,
  "description": null,
  "type": true,
  "promo": 0,
  "status": true,
  "item": {
    "Item_name": "Dark Chocolate Latte"
  },
  "restaurant_dish_menus": [{
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 4,
      "createdAt": "2018-11-13T04:28:17.000Z",
      "updatedAt": "2018-11-13T04:28:17.000Z"
    },
    {
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 3,
      "createdAt": "2018-11-13T04:28:17.000Z",
      "updatedAt": "2018-11-13T04:28:17.000Z"
    }
  ]
}, {
  "id": 69,
  "proffesional_photo": "",
  "top_image": "https://sampleimage.jpg",
  "ratings": "1",
  "price": 690,
  "description": null,
  "type": true,
  "promo": 0,
  "status": true,
  "item": {
    "Item_name": "Dark Chocolate Latte"
  },
  "restaurant_dish_menus": [{
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 6,
      "createdAt": "2018-11-13T04:28:17.000Z",
      "updatedAt": "2018-11-13T04:28:17.000Z"
    },
    {
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 5,
      "createdAt": "2018-11-13T04:28:17.000Z",
      "updatedAt": "2018-11-13T04:28:17.000Z"
    }
  ]
}, ]

let filterBy = 4;

let result = data.filter(function(row) {
  return row.restaurant_dish_menus.find(function(i) {
    return i.menu_id == filterBy;
  }) !== undefined;
});

console.log(result);

答案 2 :(得分：1)

您可以按以下方式使用“过滤器” 

var data = [{
    "id": 68,
    "proffesional_photo": "",
    "top_image": "https://sampleimage.jpg",
    "ratings": "1",
    "price": 690,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Dark Chocolate Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 4,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      },
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  },
  {
    "id": 69,
    "proffesional_photo": "",
    "top_image": "https://sampleimage2.jpg",
    "ratings": "1",
    "price": 700,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  }
  ]

function filterBy(f) {
    return data.filter(d => d.restaurant_dish_menus.some(({ menu_id }) => menu_id == f))
}

console.log(filterBy(4))

console.log(filterBy(3))

答案 3 :(得分：0)

您还可以使用grep函数

var menus=  {
    "id": 68,
    "proffesional_photo": "",
    "top_image": "https://sampleimage.jpg",
    "ratings": "1",
    "price": 690,
    "description": null,
    "type": true,
    "promo": 0,
    "status": true,
    "item": {
      "Item_name": "Dark Chocolate Latte"
    },
    "restaurant_dish_menus": [
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 4,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      },
      {
        "id": 1,
        "res_dish_id": 1318,
        "menu_id": 3,
        "createdAt": "2018-11-13T04:28:17.000Z",
        "updatedAt": "2018-11-13T04:28:17.000Z"
      }
     ]
  };

var found_names = $.grep(menus.restaurant_dish_menus, function(v) {
    return v.menu_id ===4;
});

console.log(found_names);

http://jsfiddle.net/ejPV4/

答案 4 :(得分：0)

您的问题尚不清楚最终目标，但是如果您要过滤顶级对象，即，当且仅当它带有menu_id === filterBy的盘子时，如果必须存在顶级对象，则：

let result = data.filter(row => {
  return row.restaurant_dish_menus.some(({menu_id}) => menu_id === filterBy);
});

仅当restaurant_dish_menus的项目中包含menu_id === filterBy时，以上内容才会过滤您的行。但是restaurant_dish_menus个这样的对象仍未过滤。

结果：

[{
  "id": 68,
  // skipped
  "item": {
    "Item_name": "Dark Chocolate Latte"
  },
  "restaurant_dish_menus": [
    {
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 4,
      // skipped
    },
    {
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 3,
      // skipped
    }
  ]
}]

但是，如果您要过滤顶级商品并同时过滤restaurant_dish_menus，即修改顶级对象，则：

let result = data.filter(row => {
  return row.restaurant_dish_menus.some(({menu_id}) => menu_id === filterBy);
}).map(row => {
  return {...row, restaurant_dish_menus: row.restaurant_dish_menus.filter(i => i.menu_id === filterBy)};
});

这将首先过滤具有menu_id === filterBy的行对象，然后过滤restaurant_dish_menus，使其仅包含一次menu_id === filterBy，从而有效地修改行对象，即map

结果：

[{
  "id": 68,
  // skipped
  "item": {
    "Item_name": "Dark Chocolate Latte"
  },
  "restaurant_dish_menus": [
    {
      "id": 1,
      "res_dish_id": 1318,
      "menu_id": 4,
      // skipped
    }
  ]
}]
相关问题
最新问题