基于嵌套数组按名称过滤
[英]Filtering by name based on a n nested array
问题描述
从昨天开始，我一直在尝试按项目名称进行过滤，但一直无法使其正常工作。 这是我一直在使用的示例数组。 我可以按类别过滤，但不能按项目过滤，只返回匹配的项目。 基本上，我有一个绑定到我的 serach 输入的计算属性，我能够获取所有项目，但是一旦我输入一个字符，它就无法正确过滤它。
我的标记：
<div class="col-3 mb--20">
<div class="input-group-over pl--10 round">
<input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search">
<span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span>
</div>
</div>
<div v-for='(cat, index) in menu' :key="index">
<h5 class="text-left m-4"><b>{{cat.name}}</b></h5>
<div class="row">
<div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2">
<div class="col-12 border pointer">
<div @click="test" class="p-2">
<div class="d-flex justify-content-end">
<span class="mr-auto"><b>{{item.name}}</b></span>
<span><b>${{item.price}}</b></span>
</div>
<div class="text-left text-muted pt-1">
<div class="d-flex justify-content-start">
<img :src="item.img" class="img-fluid pr-3" alt="">
<span class="crop-text">{{item.desc}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的阵列：
const m = {
"menu": [{
"categories": [{
"name": "Black Angus Burgers",
"position": 1,
"id": 1,
"items": [{
"desc": "Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger\"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417",
"name": "1/3 lb Bacon Cheddar Burger",
"price": 11
},
{
"desc": "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924",
"name": "Back Yard Classic Burger",
"price": 9
},
{
"desc": "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322",
"name": "Back Yard Double Classic Burger",
"price": 7
},
{
"desc": "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\u2019s your burger.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114",
"name": "Mushroom Swiss Burger",
"price": 10
},
{
"desc": "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930",
"name": "Black Jack Burger",
"price": 9
},
{
"desc": "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822",
"name": "Chipotle Burger",
"price": 8
},
{
"desc": "What\u2019s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500",
"name": "Black and Bleu Burger",
"price": 6
},
{
"desc": "It\u2019s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952",
"name": "Picnic Burger",
"price": 9
}
]
},
{
"name": "Turkey & More",
"position": 2,
"id": 2,
"items": [{
"desc": "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514",
"name": "Blackened Chicken Sandwich",
"price": 9
},
{
"desc": "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\u2019t bluffing. This sandwich was made for you. That is, if you\u2019re the type who likes a little kick to their chicken sandwich.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133",
"name": "Black Jack Chicken Club",
"price": 11
},
{
"desc": "A chicken classic. No, not the \u201ccross the road\u201d joke dad always tells. We\u2019re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\u2019s so good you can tell your dad the chicken crossed the road to be a part of it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131",
"name": "Grilled Chicken Sandwich",
"price": 6
},
{
"desc": "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\u2019ll want to bite into again and again.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
"name": "Chicken Tenders",
"price": 10
},
{
"desc": "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\u2019t have a problem. Or put whatever you want on it, we\u2019re pretty laid back.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120",
"name": "Classic Turkey Burger",
"price": 6
},
{
"desc": "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131",
"name": "Hawaiian Chicken Sandwich",
"price": 10
},
{
"desc": "Aaaaaaaand the crowd goes wild\u2026for this burger\u2026made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131",
"name": "Wild Turkey Burger",
"price": 8
},
{
"desc": "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\u2019s a home run.",
"img": "https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810",
"name": "Chili Cheese Hot Dog",
"price": 5
},
{
"desc": "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.",
"img": "https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045",
"name": "Back Yard Hot Dog",
"price": 11
}
]
},
{
"name": "Salads & Veggie Options",
"position": 3,
"id": 3,
"items": [{
"desc": "For a place that serves so much beef, you\u2019d think we forgot about a veggie burger. You\u2019d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034",
"name": "Veggie Burger",
"price": 10
},
{
"desc": "We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don\"t want to miss.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226",
"name": "Cranberry Pecan Chicken Salad",
"price": 11
},
{
"desc": "Fried, Grilled or Blackened \u2014 choose your chicken and we\u2019ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227",
"name": "Back Yard Chicken Salad",
"price": 10
},
{
"desc": "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226",
"name": "Side Salad",
"price": 7
}
]
},
{
"name": "Fries & Sides",
"position": 4,
"id": 4,
"items": [{
"desc": "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140",
"name": "Seasoned Fries",
"price": 9
},
{
"desc": "We individually make each of these Waffle Fries in a tiny waffle maker and then\u2026ok fine you caught us. We don\u2019t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224",
"name": "Waffle Fries",
"price": 8
},
{
"desc": "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102",
"name": "Chili Cheese Fries",
"price": 6
},
{
"desc": "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \u201cOnions for lunch\u201d suddenly has a nice ring to it.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140",
"name": "Onion Rings",
"price": 10
},
{
"desc": "It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655",
"name": "Regular Baked Potato",
"price": 10
},
{
"desc": "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141",
"name": "Loaded Baked Potato",
"price": 9
},
{
"desc": "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220",
"name": "Cup of Chili",
"price": 6
}
]
},
{
"name": "Shakes & Desserts",
"position": 4,
"id": 4,
"items": [{
"desc": "We\u2019ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\u2019ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201",
"name": "Milk Shakes",
"price": 9
},
{
"desc": "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\u2019d sell your grandma for them. Flavors vary by location \u2014 blackberry, peach, cherry, strawberry & pecan \u2014 all served fresh from the oven.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208",
"name": "Fresh-Baked Cobbler",
"price": 8
},
{
"desc": "We\u2019ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.",
"img": "https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213",
"name": "Oreo Milkshake",
"price": 9
}
]
},
{
"name": "Kids Menu",
"position": 4,
"id": 4,
"items": [{
"desc": "Light and crispy chicken tenders.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142",
"name": "Crispy Tenders",
"price": 5
},
{
"desc": "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143",
"name": "Kid's Burger ",
"price": 11
},
{
"desc": "This 100% Black Angus Beef Dog is topped with ketchup and mustard.",
"img": "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142",
"name": "Back Yard Dog",
"price": 7
}
]
}
]
}]
}
我的功能：
computed: {
menu() {
// console.log(store.state.menu)
return m.filter((doc) => {
try {
return doc
.items
.some
.name
.toLowerCase().match(this.search.toLowerCase())
} catch (err) {
console.log(err)
}
})
`
}
提前致谢
3 个解决方案
解决方案1
0 2020-03-23 16:00:09
我想这就是你想要的。 如果没有，它可能足够接近以适应您的需求。
const theMenu = { menu: [ { categories: [ { name: "Black Angus Burgers", position: 1, id: 1, items: [ { desc: 'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.', img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417", name: "1/3 lb Bacon Cheddar Burger", price: 11 }, { desc: "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924", name: "Back Yard Classic Burger", price: 9 }, { desc: "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322", name: "Back Yard Double Classic Burger", price: 7 }, { desc: "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\’s your burger.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114", name: "Mushroom Swiss Burger", price: 10 }, { desc: "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930", name: "Black Jack Burger", price: 9 }, { desc: "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822", name: "Chipotle Burger", price: 8 }, { desc: "What\’s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500", name: "Black and Bleu Burger", price: 6 }, { desc: "It\’s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952", name: "Picnic Burger", price: 9 } ] }, { name: "Turkey & More", position: 2, id: 2, items: [ { desc: "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514", name: "Blackened Chicken Sandwich", price: 9 }, { desc: "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\’t bluffing. This sandwich was made for you. That is, if you\’re the type who likes a little kick to their chicken sandwich.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133", name: "Black Jack Chicken Club", price: 11 }, { desc: "A chicken classic. No, not the \“cross the road\” joke dad always tells. We\’re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\’s so good you can tell your dad the chicken crossed the road to be a part of it.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131", name: "Grilled Chicken Sandwich", price: 6 }, { desc: "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\’ll want to bite into again and again.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Chicken Tenders", price: 10 }, { desc: "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\’t have a problem. Or put whatever you want on it, we\’re pretty laid back.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120", name: "Classic Turkey Burger", price: 6 }, { desc: "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131", name: "Hawaiian Chicken Sandwich", price: 10 }, { desc: "Aaaaaaaand the crowd goes wild\…for this burger\…made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131", name: "Wild Turkey Burger", price: 8 }, { desc: "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\’s a home run.", img: "https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810", name: "Chili Cheese Hot Dog", price: 5 }, { desc: "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.", img: "https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045", name: "Back Yard Hot Dog", price: 11 } ] }, { name: "Salads & Veggie Options", position: 3, id: 3, items: [ { desc: "For a place that serves so much beef, you\’d think we forgot about a veggie burger. You\’d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034", name: "Veggie Burger", price: 10 }, { desc: 'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.', img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226", name: "Cranberry Pecan Chicken Salad", price: 11 }, { desc: "Fried, Grilled or Blackened \— choose your chicken and we\’ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227", name: "Back Yard Chicken Salad", price: 10 }, { desc: "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226", name: "Side Salad", price: 7 } ] }, { name: "Fries & Sides", position: 4, id: 4, items: [ { desc: "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140", name: "Seasoned Fries", price: 9 }, { desc: "We individually make each of these Waffle Fries in a tiny waffle maker and then\…ok fine you caught us. We don\’t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224", name: "Waffle Fries", price: 8 }, { desc: "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102", name: "Chili Cheese Fries", price: 6 }, { desc: "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \“Onions for lunch\” suddenly has a nice ring to it.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140", name: "Onion Rings", price: 10 }, { desc: "It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.", img: "https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655", name: "Regular Baked Potato", price: 10 }, { desc: "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141", name: "Loaded Baked Potato", price: 9 }, { desc: "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220", name: "Cup of Chili", price: 6 } ] }, { name: "Shakes & Desserts", position: 4, id: 4, items: [ { desc: "We\’ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\’ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.", img: "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201", name: "Milk Shakes", price: 9 }, { desc: "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\’d sell your grandma for them. Flavors vary by location \— blackberry, peach, cherry, strawberry & pecan \— all served fresh from the oven.", img: "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208", name: "Fresh-Baked Cobbler", price: 8 }, { desc: "We\’ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.", img: "https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213", name: "Oreo Milkshake", price: 9 } ] }, { name: "Kids Menu", position: 4, id: 4, items: [ { desc: "Light and crispy chicken tenders.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Crispy Tenders", price: 5 }, { desc: "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143", name: "Kid's Burger ", price: 11 }, { desc: "This 100% Black Angus Beef Dog is topped with ketchup and mustard.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142", name: "Back Yard Dog", price: 7 } ] } ] } ] }; var app = new Vue({ el: "#app", data: { theMenu: theMenu, search: "" }, computed: { menu() { if(this.search.trim() === "") { return this.theMenu.menu[0].categories; } return this.theMenu.menu[0].categories.map(doc => { const newItems = doc.items.filter(item => { return item.name.toLowerCase().match(this.search.toLowerCase()); }); return {...doc, items: newItems }; }); } } });
img { width: 20px; height: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="col-3 mb--20"> <div class="input-group-over pl--10 round"> <input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search"> <span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span> </div> </div> <div v-for='(cat, index) in menu' :key="index"> <h5 class="text-left m-4"><b>{{cat.name}}</b></h5> <div class="row"> <div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2"> <div class="col-12 border pointer"> <div class="p-2"> <div class="d-flex justify-content-end"> <span class="mr-auto"><b>{{item.name}}</b></span> <span><b>${{item.price}}</b></span> </div> <div class="text-left text-muted pt-1"> <div class="d-flex justify-content-start"> <img :src="item.img" class="img-fluid pr-3" alt=""> <span class="crop-text">{{item.desc}}</span> </div> </div> </div> </div> </div> </div> </div> </div>
解决方案2
0 已采纳 2020-03-23 16:38:52
试试下面的代码片段：
更新
Vue 实现：
const menu = { menu: [ { categories: [ { name: "Black Angus Burgers", position: 1, id: 1, items: [ { desc: 'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.', img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417", name: "1/3 lb Bacon Cheddar Burger", price: 11 }, { desc: "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924", name: "Back Yard Classic Burger", price: 9 }, { desc: "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322", name: "Back Yard Double Classic Burger", price: 7 }, { desc: "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It\’s your burger.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114", name: "Mushroom Swiss Burger", price: 10 }, { desc: "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930", name: "Black Jack Burger", price: 9 }, { desc: "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822", name: "Chipotle Burger", price: 8 }, { desc: "What\’s Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500", name: "Black and Bleu Burger", price: 6 }, { desc: "It\’s like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952", name: "Picnic Burger", price: 9 } ] }, { name: "Turkey & More", position: 2, id: 2, items: [ { desc: "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514", name: "Blackened Chicken Sandwich", price: 9 }, { desc: "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren\’t bluffing. This sandwich was made for you. That is, if you\’re the type who likes a little kick to their chicken sandwich.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133", name: "Black Jack Chicken Club", price: 11 }, { desc: "A chicken classic. No, not the \“cross the road\” joke dad always tells. We\’re talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It\’s so good you can tell your dad the chicken crossed the road to be a part of it.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131", name: "Grilled Chicken Sandwich", price: 6 }, { desc: "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you\’ll want to bite into again and again.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Chicken Tenders", price: 10 }, { desc: "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won\’t have a problem. Or put whatever you want on it, we\’re pretty laid back.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120", name: "Classic Turkey Burger", price: 6 }, { desc: "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131", name: "Hawaiian Chicken Sandwich", price: 10 }, { desc: "Aaaaaaaand the crowd goes wild\…for this burger\…made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131", name: "Wild Turkey Burger", price: 8 }, { desc: "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it\’s a home run.", img: "https://s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810", name: "Chili Cheese Hot Dog", price: 5 }, { desc: "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.", img: "https://s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045", name: "Back Yard Hot Dog", price: 11 } ] }, { name: "Salads & Veggie Options", position: 3, id: 3, items: [ { desc: "For a place that serves so much beef, you\’d think we forgot about a veggie burger. You\’d be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.", img: "https://s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034", name: "Veggie Burger", price: 10 }, { desc: 'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.', img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226", name: "Cranberry Pecan Chicken Salad", price: 11 }, { desc: "Fried, Grilled or Blackened \— choose your chicken and we\’ll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227", name: "Back Yard Chicken Salad", price: 10 }, { desc: "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226", name: "Side Salad", price: 7 } ] }, { name: "Fries & Sides", position: 4, id: 4, items: [ { desc: "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140", name: "Seasoned Fries", price: 9 }, { desc: "We individually make each of these Waffle Fries in a tiny waffle maker and then\…ok fine you caught us. We don\’t have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224", name: "Waffle Fries", price: 8 }, { desc: "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102", name: "Chili Cheese Fries", price: 6 }, { desc: "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? \“Onions for lunch\” suddenly has a nice ring to it.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140", name: "Onion Rings", price: 10 }, { desc: "It's a plain,fluffy,white baked potato,dude.You know what it is.A classic.Butter & sour cream available upon request.", img: "https://s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655", name: "Regular Baked Potato", price: 10 }, { desc: "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141", name: "Loaded Baked Potato", price: 9 }, { desc: "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.", img: "https://s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220", name: "Cup of Chili", price: 6 } ] }, { name: "Shakes & Desserts", position: 4, id: 4, items: [ { desc: "We\’ve taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you\’ll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.", img: "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201", name: "Milk Shakes", price: 9 }, { desc: "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you\’d sell your grandma for them. Flavors vary by location \— blackberry, peach, cherry, strawberry & pecan \— all served fresh from the oven.", img: "https://s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208", name: "Fresh-Baked Cobbler", price: 8 }, { desc: "We\’ll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.", img: "https://s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213", name: "Oreo Milkshake", price: 9 } ] }, { name: "Kids Menu", position: 4, id: 4, items: [ { desc: "Light and crispy chicken tenders.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Crispy Tenders", price: 5 }, { desc: "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup,mustard and pickle.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143", name: "Kid's Burger ", price: 11 }, { desc: "This 100% Black Angus Beef Dog is topped with ketchup and mustard.", img: "https://s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142", name: "Back Yard Dog", price: 7 } ] } ] } ] }; var app = new Vue({ el: "#app", data: { menu, search: "" }, computed: { appMenu() { if (this.search.trim().length) { return this.menu.menu[0].categories.map(doc => { const items = doc.items.filter(item => { return item.name.match(new RegExp(`${this.search}`, 'i')); }); return { ...doc, items }; }).filter(({ items }) => items.length > 0); } else { return this.menu.menu[0].categories; } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="col-3 mb--20"> <div class="input-group-over pl--10 round"> <input v-model="search" type="text" class="form-control form-control-sm iqs-input" data-container=".iqs-container" value="" placeholder="Search"> <span class="fi fi-search btn btn-sm pl--12 pr--12 text-gray-500"></span> </div> </div> <div v-for='(cat, index) in appMenu' :key="index"> <h5 class="text-left m-4"><b>{{cat.name}}</b></h5> <div class="row"> <div v-for='(item, index2) in cat["items"]' :key="index2" class="col-lg-6 col-md-12 mt-2"> <div class="col-12 border pointer"> <div class="p-2"> <div class="d-flex justify-content-end"> <span class="mr-auto"><b>{{item.name}}</b></span> </div> </div> </div> </div> </div> </div> </div>
解决方案3
0 2020-03-23 18:13:12
此答案仅涵盖数据过滤，从您的类别和搜索词开始，并仅返回具有与该词匹配的项目的类别以及每个类别中与该词实际匹配的项目。
这将 Vue 处理留给其他代码，但我还是建议这样做。
const filterCategories = (categories, searchTerm) => categories .map (({items, ...rest}) => ({ ...rest, items: items .filter (({desc}) => desc .toLowerCase () .match (searchTerm .toLowerCase ())) })) .filter (({items}) => items .length > 0) const categories = [{name: "Black Angus Burgers", position: 1, id: 1, items: [{desc: 'Bring home the bacon, but make sure that bacon is hickory smoked and on top of cheddar and 1/3 lb. of chargrilled Black Angus beef. This burger"s name explains itself. Of course, you can also top it with crisp lettuce, tomatoes and anything else.', img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/bacon-cheddar-burger.png?mtime=20160801105417", name: "1/3 lb Bacon Cheddar Burger", price: 11}, {desc: "A classic burger just like dad used to make. That is, if your dad was a crowd-pleasing grillmaster who used Black Angus beef topped with garden-fresh lettuce, lush tomatoes and crunchy dill pickles. Apologies to dads everywhere.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-burger.png?mtime=20160801105924", name: "Back Yard Classic Burger", price: 9}, {desc: "How do you improve a classic? Double it. Twice as much Black Angus beef as our Classic burger with the same mouthwatering fixings. Grab a few extra napkins for this one. This burger is big.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.04.40-PM.png?mtime=20160801110322", name: "Back Yard Double Classic Burger", price: 7}, {desc: "Sauted mushrooms. Creamy Swiss. Black Angus beef. Mouth. Now. Wait, wait, wait. Before you do, top it with fresh lettuce and tomatoes. Or top it with anything else you want. It's your burger.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/mush-swiss-burger.png?mtime=20160801110114", name: "Mushroom Swiss Burger", price: 10}, {desc: "The ace up our sleeve, dealt to your hands, no bluffing and this metaphor has gone on too long. No tricks here. Our Black Jack Burger is topped with pepper jack cheese and zesty creole mayo. Grill-blackened Angus with a kick. Your move.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/Screen-Shot-2016-07-05-at-3.00.40-PM.png?mtime=20160721140930", name: "Black Jack Burger", price: 9}, {desc: "Sweet. Baby. Rays!, dad proclaimed after a single burger bite. The savory stack of Black Angus beef, chipotle mayo, cheddar, smoky bacon, crispy onion straws, tomato and pickles. Oh, and Sweet Baby Rays BBQ sauce. Maybe that's why he said it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/chipotle-burger.png?mtime=20160801105822", name: "Chipotle Burger", price: 8}, {desc: "What's Black Angus beef and bleu all over? This burger. Crumbled bleu cheese and smoky bacon top this mouthwatering concoction straight from the classic black and bleu inspiration well.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/JPGs/black-and-blue-burger.png?mtime=20160801110500", name: "Black and Bleu Burger", price: 6}, {desc: "It's like someone pointed a shrink ray at one of our classic burgers, but somehow kept the classic taste. Science? Magic? Skynet! No, no. Our chefs just know how to deliver big, bold flavor in any size.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/picnic-burger.png?mtime=20160801104952", name: "Picnic Burger", price: 9}]}, {name: "Turkey & More", position: 2, id: 2, items: [{desc: "Blackened chicken met creamy slaw and they fell in love. Now you can eat their love complete with perfectly ripe tomatoes. This chicken sandwich is spicy and zesty and waiting for you to order it already.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackenedChickenSandwich.jpg?mtime=20160801112514", name: "Blackened Chicken Sandwich", price: 9}, {desc: "Blackened chicken. Pepper Jack cheese. Bacon. Creole mayo. No, we aren't bluffing. This sandwich was made for you. That is, if you're the type who likes a little kick to their chicken sandwich.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-BlackJackChickenClub.jpg?mtime=20160721141133", name: "Black Jack Chicken Club", price: 11}, {desc: "A chicken classic. No, not the “cross the road” joke dad always tells. We're talking about this seasoned, chargrilled-to-juicy-perfection Grilled Chicken Sandwich. It's so good you can tell your dad the chicken crossed the road to be a part of it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-GrilledChickenSandwich.jpg?mtime=20160721141131", name: "Grilled Chicken Sandwich", price: 6}, {desc: "The only thing tender about these big and bold Chicken Tenders is, well, everything. Our juicy, tender white chicken is covered with crunchy yet fluffy breading you'll want to bite into again and again.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Chicken Tenders", price: 10}, {desc: "Who are you calling a turkey? Oh, our Classic Turkey Burger? Well, ok then. Top this char-grilled turkey with crisp lettuce, fresh tomato and mayo and we won't have a problem. Or put whatever you want on it, we're pretty laid back.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/classic-turkey-burger.png?mtime=20160801111120", name: "Classic Turkey Burger", price: 6}, {desc: "Charbroiled chicken breast hand-dipped in Hawaiian sauce then topped with freshly grilled pineapple, mustard and crisp lettuce. This sandwich has enough Hawaiian flavor packed in without you wearing a hula skirt to eat it, dad.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-HawaiianChickenSandwich.jpg?mtime=20160721141131", name: "Hawaiian Chicken Sandwich", price: 10}, {desc: "Aaaaaaaand the crowd goes wild…for this burger…made of turkey. Seriously. The Pepper Jack cheese. The creole mayo. The tangy mustard. It all comes together on this sandwich built to please turkey burger lovers and doubters alike.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/BYB-WildTurkeyBurger.jpg?mtime=20160721141131", name: "Wild Turkey Burger", price: 8}, {desc: "The best of the ballpark is now at the Back Yard. We decided to forgo the classic ketchup and mustard for something a little hotter and a whole lot meatier, and topped it off with some ooey gooey cheddar cheese. We think it's a home run.", img: "https: //s3.amazonaws.com/backyardburgers.com/BYB-ChiliCheeseDog_BurntBun.jpg?mtime=20190325101810", name: "Chili Cheese Hot Dog", price: 5}, {desc: "The humble, back yard legend: a juicy all-beef hot dog grilled on an open flame. Topped with ketchup, mustard, and relish.", img: "https: //s3.amazonaws.com/backyardburgers.com/BYB_HotDog_012.jpg?mtime=20190522104045", name: "Back Yard Hot Dog", price: 11}]}, {name: "Salads & Veggie Options", position: 3, id: 3, items: [{desc: "For a place that serves so much beef, you'd think we forgot about a veggie burger. You'd be sadly mistaken, veggie man or veggie woman! Top yours with lettuce, tomato, red onion, pickles, mustard and/or ketchup.", img: "https: //s3.amazonaws.com/backyardburgers.com/Turkey-Chicken-Veggie/VeggieBurger-RegularBun.jpg?mtime=20160721141034", name: "Veggie Burger", price: 10}, {desc: 'We start with a fresh lettuce base and add tomatoes, red onion, bacon, blue cheese crumbles, candied pecans, dried cranberries, and croutons. Add Grilled, Fried or Blackened Chickn. This salad is one you don"t want to miss.', img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/Chopped-Salad.JPG?mtime=20160721141226", name: "Cranberry Pecan Chicken Salad", price: 11}, {desc: "Fried, Grilled or Blackened — choose your chicken and we'll lay it on a bed of fresh lettuce, sharp red onions, vine-ripened tomatoes and sliced cucumbers.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-ChickenSalad.jpg?mtime=20160721141227", name: "Back Yard Chicken Salad", price: 10}, {desc: "Dive in to fresh, crisp lettuce, sharp red onions, vine-ripened tomatoes and cool sliced cucumbers.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Salads/BYB-SideSalad.jpg?mtime=20160721141226", name: "Side Salad", price: 7}]}, {name: "Fries & Sides", position: 4, id: 4, items: [{desc: "These fries are the reason for the seasoning that we put on these fries. Crispy outside. Fluffy inside. Yes, you would like fries with that. And with that. And that.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/seasoned-fries.png?mtime=20160729142140", name: "Seasoned Fries", price: 9}, {desc: "We individually make each of these Waffle Fries in a tiny waffle maker and then…ok fine you caught us. We don't have a tiny waffler. We make our Waffle Fries the old fashioned way. Hot. Crispy. Always delicious.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/BYB-WaffleFries.jpg?mtime=20160721141224", name: "Waffle Fries", price: 8}, {desc: "Potatoes, meet Meat. Meat, potatoes. Thick, beefy chili served on top of your choice of our heritage waffle fries or seasoned cut fries. Then sprinkled with a layer of golden Cheddar cheese. Grab a fork.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/chili-cheese-fries.png?mtime=20160729142102", name: "Chili Cheese Fries", price: 6}, {desc: "Order these crispy, thick-sliced golden rings as your side. Or as your meal. Why not? “Onions for lunch” suddenly has a nice ring to it.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/onion-rings.png?mtime=20160729142140", name: "Onion Rings", price: 10}, {desc: "It's a plain, fluffy, white baked potato, dude.You know what it is.A classic.Butter & sour cream available upon request.", img: "https: //s3.amazonaws.com/backyardburgers.com/Plain-Potato.png?mtime=20180805214655", name: "Regular Baked Potato", price: 10}, {desc: "A stacked spud for those who like their baked potato like we like our blind dates: loaded and VERRRRRRRY cheesy. We sprinkle sharp Cheddar, crunchy bacon and a dollop of sour cream on a fluffy, white baked potato.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/loaded-baked-potato.png?mtime=20160729142141", name: "Loaded Baked Potato", price: 9}, {desc: "Is it hot in here or is it just this cup of hearty beef chili? Oh, it's the chili. It's steaming hot in fact. But the heat really kicks in with the jalepeños. Topped with sharp Cheddar, you get all the flavor of a fall meal you can enjoy any time.", img: "https: //s3.amazonaws.com/backyardburgers.com/Hot-Dogs-Sides/Sides/Chili.jpg?mtime=20160721141220", name: "Cup of Chili", price: 6}]}, {name: "Shakes & Desserts", position: 4, id: 4, items: [{desc: "We've taken this classic American treat and made it even more lovable. How? By offering each flavor in a shake so thick & creamy, you'll want to skip the straw and dive right in. Available in Chocolate, Strawberry, Vanilla, Banana and Chocolate Oreo.", img: "https: //s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Milkshake-Trio.jpg?mtime=20160721141201", name: "Milk Shakes", price: 9}, {desc: "Underneath that flaky, buttery crust, our cobbler is loaded with fillings so good you'd sell your grandma for them. Flavors vary by location — blackberry, peach, cherry, strawberry & pecan — all served fresh from the oven.", img: "https: //s3.amazonaws.com/backyardburgers.com/Shakes-Desserts/Cobbler/BYB-Desserts-Cobbler-Peach.jpg?mtime=20160721141208", name: "Fresh-Baked Cobbler", price: 8}, {desc: "We'll crumble a bunch of Oreos and put them in a milkshake for you because we want you to enjoy life as much as possible. Grab one of our thick straws and enjoy.", img: "https: //s3.amazonaws.com/backyardburgers.com/LTO Items/Sides/BYB-OreoShakewCherry.jpg?mtime=20170828143213", name: "Oreo Milkshake", price: 9}]}, {name: "Kids Menu", position: 4, id: 4, items: [{desc: "Light and crispy chicken tenders.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-chicken.png?mtime=20160729142142", name: "Crispy Tenders", price: 5}, {desc: "Our Kid's Burger is made with 100 % Black Angus Beef and topped with ketchup, mustard and pickle.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-burger.png?mtime=20160729142143", name: "Kid's Burger ", price: 11}, {desc: "This 100% Black Angus Beef Dog is topped with ketchup and mustard.", img: "https: //s3.amazonaws.com/backyardburgers.com/Burgers/updated/kids-meal-hot-dog.png?mtime=20160729142142", name: "Back Yard Dog", price: 7}]}]; console .log ('*** With `tender` ***') console .log (filterCategories (categories, 'tender')) console .log ('*** With `mustard` ***') console .log (filterCategories (categories, 'mustard'))
.as-console-wrapper {min-height: 100% !important; top: 0}
Angular 基于另一个数组的嵌套数组过滤（导航菜单）
[英]Angular nested array filtering based on another array (Navigation menu)
使用基于嵌套值的 arrays 过滤对象数组以提取特定字段
[英]Filtering array of objects with arrays based on nested value to extract specific fields
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.