堆栈内存溢出
  繁体   English   中英

JS过滤器中的数组

[英]JS filter array by array within

 原文  2018-11-13 05:03:55  6   5    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 个解决方案

解决方案1
 3 已采纳  2018-11-13 05:21:43

这个怎么样 

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

解决方案2
 2  2018-11-13 05:15:23

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

解决方案3
 1  2018-11-13 05:28:10

您可以如下使用“过滤器” 

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

解决方案4
 0  2018-11-13 05:12:33

您也可以使用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/

解决方案5
 0  2018-11-13 05:15:45

您的问题尚不清楚最终目标，但如果您要过滤顶级对象，即，当且仅当它具有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项为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
    }
  ]
}]

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 过滤数组和数组 数组内的过滤器数组 在对象数组中过滤数组 数组故障中的过滤数组 将项目过滤到数组内的数组中？ 按数组下划线JS过滤数组 过滤对象数组js JS过滤数组数组 Js过滤嵌套数组 JS过滤一个数组object
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM