В отношении один ко многим, есть ли способ фильтровать родительские объекты через атрибут потомка? - PullRequest
0 голосов
/ 14 января 2019

У меня есть рельсовый бэкэнд со следующими отношениями: У ПОЛЬЗОВАТЕЛЯ много ДВИЖЕНИЙ. Ход имеет много ящиков. В коробке много предметов.

У меня есть страница, на которой перечислены все поля внутри определенного хода, и на этой странице также перечислены все элементы для этого конкретного хода. У меня есть панель поиска на этой странице, которая позволяет вам искать конкретные элементы. Я могу отфильтровать показ своих товаров, но не могу понять, как отфильтровать свои ящики, выполнив поиск по названию предметов В них.

Я пробовал перебирать массив объектов Box, а затем перебирать ключ внутри каждого ящика, который указывает на его массив элементов. Я могу получить отфильтрованные ПУНКТЫ, но я не знаю, как перевести это обратно, чтобы отразить КОРОБКИ с этими пунктами.

Например, в консоли я попробовал:

    var filteredBoxes = boxes.map((box) => {
      return box.items.filter((i) => {
         return i.name.includes(this.state.searchTerm)
       })
     })

Но он продолжает возвращать предметы, а не ящики, которые я пытаюсь отфильтровать.

Вот как выглядит JSON, когда я беру свои ящики. Я также использовал сериализатор для перечисления предметов:

{
id: 1,
name: "Bedding",
category: "Bedroom",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 1,
name: "Comforter",
image: "https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
box_id: 1
},
{
id: 2,
name: "Throw Pillows",
image: "https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
box_id: 1
}
]
},
{
id: 2,
name: "Random Blankets",
category: "Den",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 3,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 2
},
{
id: 4,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 2
}
]
},
{
id: 3,
name: "Cleaning Supplies",
category: "Kitchen",
move_id: 1,
move: {
id: 1,
name: "Leaving for College",
date: "2019-08-12",
user_id: 1
},
items: [
{
id: 5,
name: "Pillows",
image: "https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
box_id: 3
},
{
id: 6,
name: "Stuffed Animals",
image: "https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
box_id: 3
}
]
}

1 Ответ

0 голосов
/ 14 января 2019

вам просто нужно перебирать ящики и фильтровать элементы. На основании этих отфильтрованных элементов вы можете выбрать, возвращать или нет поле для списка.

const data = [{
   id:1,
   name:"Bedding",
   category:"Bedroom",
   move_id:1,
   move:{
      id:1,
      name:"Leaving for College",
      date:"2019-08-12",
      user_id:1
   },
   items:[
      {
         id:1,
         name:"Comforter",
         image:"https://www.shopmarriott.com/images/products/v2/lrg/Marriott-down-duvet-comforter-MAR-112_1_lrg.jpg",
         box_id:1
      },
      {
         id:2,
         name:"Throw Pillows",
         image:"https://media.kohlsimg.com/is/image/kohls/3427815?wid=500&hei=500&op_sharpen=1",
         box_id:1
      }
   ]
},
{
   id:2,
   name:"Random Blankets",
   category:"Den",
   move_id:1,
   move:{
      id:1,
      name:"Leaving for College",
      date:"2019-08-12",
      user_id:1
   },
   items:[
      {
         id:3,
         name:"Pillows",
         image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
         box_id:2
      },
      {
         id:4,
         name:"Stuffed Animals",
         image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
         box_id:2
      }
   ]
},
{
   id:3,
   name:"Cleaning Supplies",
   category:"Kitchen",
   move_id:1,
   move:{
      id:1,
      name:"Leaving for College",
      date:"2019-08-12",
      user_id:1
   },
   items:[
      {
         id:5,
         name:"Pillows",
         image:"https://www.greatsleep.com/on/demandware.static/-/Sites-tbp-master-catalog/default/dw9ff5c1cf/product-images/pillows/nautica/down-alt-pillow-2-pack-na-91644/nautica-down-alternative-pillow-2-pack_91644-icon-2500x2500.jpg",
         box_id:3
      },
      {
         id:6,
         name:"Stuffed Animals",
         image:"https://s7d9.scene7.com/is/image/JCPenney/DP0817201617082870M?resmode=sharp2&op_sharpen=1&wid=550&hei=550",
         box_id:3
      }
   ]
}];

const searchTerm = "Animals"

// function to filter sub-items
const filterItems = items => items.filter((i) => searchTerm ? i.name.includes(searchTerm) : i.name);

const filteredBoxes = data.map(boxes => {
  //filter sub-items
  const items = filterItems(boxes.items);
  //in case there is any item, return that boxes
  if (items.length) {  
    return Object.assign({}, boxes, { items })
  }
  // in case there is nothing, return false
  return false;
 }).filter(Boolean); // filter the boxes list removing the false values
 
console.log('filteredBoxes', filteredBoxes);
...