What is the best way to exclude all elements in the array that do not match this specific

Question

What is the best way to exclude all elements in the array that do not match this specific

For instance, here is a snippet of code that utilizes a JSON object:

"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"
                }
            ]
            }

In this scenario, if the element accessed equals 'tomato', only the food items containing tomato should be displayed.

Here is an example in HTML:

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

Additionally, the following JavaScript logic is used:

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

// Insert appropriate action here

            }
          }
      }
      return null;    }

If anyone can provide assistance, it would be greatly appreciated!

In summary, when myAccess is set to 'tomato', the script should identify and extract the first appetizer with tomato as an ingredient, pushing only those ingredients with tomato.

javascript arrays angularjs json

Answer 1

Answer №1

To filter items based on ingredients, you can use the filter method along with some or every:

Items that contain some of the specified ingredients:

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

Items that have all of the specified ingredients:

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

Answer 2

To filter items based on ingredients, you can use the filter method along with some or every:

Items that contain some of the specified ingredients:

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

Items that have all of the specified ingredients:

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

Answer 3

Answer №2

perhaps this information could be of assistance to you

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 4

perhaps this information could be of assistance to you

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 5

Answer №3

Make sure to also refer to the following JavaScript code snippet which may help resolve your issue.

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 if it exists
                break;
            }
        }
        if(flag == 'false') {
            appetizer.splice(index, i); // Remove the item if not found
        }
    }
    $scope.appetizers = appetizer; // Reassign the variable
}

I have introduced a new variable flag to determine whether the array contains the value of myAccess. Using this logic, I removed the index from the array variable appetizer and replaced the scope variable with it.

Please note that I have not tested the code. Feel free to use this logic in your implementation if it seems suitable.

UPDATE - After reviewing @HMR's answer, my code appears to be less effective :)

Answer 6

Make sure to also refer to the following JavaScript code snippet which may help resolve your issue.

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 if it exists
                break;
            }
        }
        if(flag == 'false') {
            appetizer.splice(index, i); // Remove the item if not found
        }
    }
    $scope.appetizers = appetizer; // Reassign the variable
}

I have introduced a new variable flag to determine whether the array contains the value of myAccess. Using this logic, I removed the index from the array variable appetizer and replaced the scope variable with it.

Please note that I have not tested the code. Feel free to use this logic in your implementation if it seems suitable.

UPDATE - After reviewing @HMR's answer, my code appears to be less effective :)

Answer 7

Answer №4

Insert appetizers into your array in this manner:

function addAppetizer() {
var chosenAppetizer = ["garlic bread"];

  $scope.selectedItems = [];
  var appetizersArray = $scope.appetizers;
  for (var x = 0; x < appetizersArray.length; x++) {
    for (var y = 0; y < appetizersArray[x].ingredientList.length; y++) {

        if (appetizersArray[x].ingredientList[y].title === chosenAppetizer) {

             // Add code here
             $scope.appetizers.push(appetizersArray[x]); // New line of code.
        }
      }
  }
  return null;    
}

Answer 8

Insert appetizers into your array in this manner:

function addAppetizer() {
var chosenAppetizer = ["garlic bread"];

  $scope.selectedItems = [];
  var appetizersArray = $scope.appetizers;
  for (var x = 0; x < appetizersArray.length; x++) {
    for (var y = 0; y < appetizersArray[x].ingredientList.length; y++) {

        if (appetizersArray[x].ingredientList[y].title === chosenAppetizer) {

             // Add code here
             $scope.appetizers.push(appetizersArray[x]); // New line of code.
        }
      }
  }
  return null;    
}

What is the best way to exclude all elements in the array that do not match this specific

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using this.el.object3D.position.set(0,0,0) may not function correctly unless a breakpoint is placed in the debugger beforehand

Google Map not rendering correctly when dynamically implemented for the second time

Toggle visibility of button based on current selection

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Host image previews on the server using Dropzone.js

Certain components cannot be concealed from particular routes

Uh oh! There seems to be an issue with the ClerkJS frontendAPI option. Visit the homepage at https://dashboard.clerk.dev to retrieve your unique Frontend API value

What is the process for generating a 3D array consisting of a tuple of arrays using numpy, with each element mirroring the result of np.where function?

accessing the offsetTop property of React elements

Is there a way to customize or change the default data parsing and object creation behavior of jQuery's $.ajax method?

Modifying the Data in the JSON_ARRAY Mysql 8.0

What is the proper way to provide JSON input for a PUT JAX-RS API that accepts data of type Map<Person, Person>?

Steps to display a table upon clicking the submit button in a form

Unable to toggle visibility of image

Combining the powers of $.get and $.ready

Arrange the strings in the json data based on their frequency in descending order while maintaining the original sequence of keys in

jQuery post method not transmitting POST data successfully

What is the best way to incorporate PHP code within a JavaScript function?

jQuery UI Slider is malfunctioning (code example included)

When Utilizing an async Task Method, DbContext is Properly Disposed