как не пихать весь массив, нет этого товара

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, если массив мой доступ равен помидору, просто я хочу отобразить еду, в которой есть помидор.

поэтому я использовал этот 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;    }

извините, если кто-то может помочь, пожалуйста !!

so myAccess =помидор, и следует прочитать первую закуску, что в ингредиенте помидор, и я хочу нажать только ингредиент, который есть помидор.

Answer 1

это может быть полезно для вас

var app=angular.module("myapp",[]);
app.controller("test_ctrl",function($scope){
$scope.appetizers = [];
$scope.temp={
	"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"
						}
					]
				}
			]
		}
}
            
            
            var myAccess = ["tomato"];

      
      var appetizer = $scope.temp.food.appetizers;
      for (var i = 0; i < appetizer.length; i++) {
        for (var j = 0; j < appetizer[i].ingredient.length; j++) {
            if (appetizer[i].ingredient[j].name === myAccess[0]) {
                $scope.appetizers.push(appetizer[i]);

            }
          }
      }
         
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


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

Answer 2

В дополнение к комментарию проверьте приведенный ниже JS, который может решить вашу проблему.

function myFunction() {
    var myAccess = "tomato";
    $scope.test = [];
    var appetizer = $scope.appetizers;
    for (var i = 0; i < $scope.appetizers.length; i++) {
        var flag = 'false';
        for (var j = 0; j < $scope.appetizers[i].ingredient.length; j++) {
            if ($scope.appetizers[i].ingredient[j].name === myAccess) {
                flag = 'true'; // Flag to check whether it's exist
                break;
            }
        }
        if(flag == 'false') {
            appetizer.splice(index, i); // Pop that item if it's not exist
        }
    }
    $scope.appetizers = appetizer; // Re-assign
}

Введена переменная flag, которая скажет, содержит ли этот массив значение myAccess или нет.Исходя из этого, я удалил этот индекс из этой переменной массива appetizer.Наконец, эта переменная массива заменит переменную области видимости.

Я не проверял код.Так что, просто попробуйте или реализуйте свою логику, используя эту логику, если она вам подходит.

РЕДАКТИРОВАТЬ - Мой код выглядит не очень эффективным при сравнении ответа @HMR:)

Answer 3

Вставьте закуски в ваш массив, как это.

function myFunction() {
var myAccess = ["tomato"];

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

        if (appetizer[i].ingredient[j].name === myAccess) {

             // what should i write here
             $scope.appetizers.push(appetizer[i]); // additional code here.
        }
      }
  }
  return null;    }

Answer 4

Вы можете использовать фильтр и некоторые или каждые следующим образом:

Элементы, содержащие некоторые ингредиенты

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