javascript - 怎么不推全阵没有这个产品

Question

例如我有这段代码我使用了这个 json:

"food": {
        "appetizers": [
            {
                "id": 1,
                "image": "../image/calammari.png",
                "title": "rings",
                "price": 11500,
                "ingredient":[{
                    "id" : "0001",
                    "name": "avocado"
                },
                {
                    "id" : "0001",
                    "name": "tomato"
                }
            ]
            },
            {
                "id": 2,
                "image": "../image/food2.png",
                "title": "bang bang",
                "price": 10000,
                "ingredient":[{
                    "id" : "0001",
                    "name": "eggplant"
                },
                {
                    "id" : "0001",
                    "name": "cucumber"
                }
            ]
            }

从这个 json 文件中，如果我访问的数组等于 tomato ，我只想显示有 tomato 的食物。

所以我使用了这个 html:

  <div ng-repeat="appetizer in appetizers ">
                        <div>
                            <img ng-src="{{appetizer.image}}" />
                           <div >
                                <p >
                                    {{appetizer.title | uppercase}}
                                </p>
                            </div>

和这个 javascript :

  var myAccess = ["tomato"];

      $scope.test = [];
      var appetizer = $scope.appetizers;
      for (var i = 0; i < $scope.appetizers.length; i++) {
        for (var j = 0; j < $scope.appetizers[i].ingredient.length; j++) {

            if ($scope.appetizers[i].ingredient[j].name === myAccess) {

// what should i write here

            }
          }
      }
      return null;    }

很抱歉，如果有人可以提供帮助!!

所以 myAccess = tomato，并且应该阅读配料 tomato 中的开胃菜的第一道菜，我只想推送有 tomato 的配料。

Answer 1

您可以使用 filter和 some或 every通过以下方式:

含有某些成分的元素

const data = [{"id":1,"image":"../image/calammari.png","title":"rings","price":11500,"ingredient":[{"id":"0001","name":"avocado"},{"id":"0001","name":"tomato"}]},{"id":2,"image":"../image/food2.png","title":"bang bang","price":10000,"ingredient":[{"id":"0001","name":"eggplant"},{"id":"0001","name":"cucumber"}]}];
const myAccess = ['avocado', 'tomato'];

console.log(
  data.filter(
    (item) => 
      item.ingredient.some(
        (ingredient) => myAccess.includes(ingredient.name)
      )
  )
);

具有所有成分的元素:

data.filter(
  (item) => 
    myAccess.every(
      (ingredient)=>
        item.ingredient.some(
          (i)=>i.name===ingredient
        )
    )
);