Iterating over array of objects in Javascript

Question

I am using angularjs.I am having one select box.In select i am displaying all the exercise names by doing ng-repeat where multiple exercise names can be selected.

Here is my HTML

<div class="form-group">
    <label for="exampleInputEmail1">Selct Exercises</label>
    <select class="form-control select2" multiple>
        <option data-ng-repeat="exercise in exercises" value="
        {{exercise}}" data-ng-checked="selection.indexOf(exercise) > -1" data-ng-click="toggleSelectionExercise(exercise)">
            {{exercise.name}}</option>
    </select>
</div>

Now after selecting multiple exercise names onclick i am calling this function

Controller.js

$scope.parameterTest = [];
$scope.parameter1 = [];
var exercise = [];
$scope.toggleSelectionExercise = function
toggleSelection(exercise) {
  var idx = $scope.parameterTest.indexOf(exercise);
  if (idx > -1) {
    $scope.parameterTest.splice(idx, 1);
  } else {
    console.log(exercise);
    $scope.parameterTest.push(exercise);
    for (var i = 0; i < $scope.parameterTest.length; i++) {
      var parameter1 = {
        "exid": exercise._id,
        "modify": 0,
        "sets": exercise.sets,
        "reps": exercise.reps,
        "rest_duration": 60,
        "ord": 0
      };
      /*Setting in json format and storing in parameter1*/
      $scope.parameterTest[i] = parameter1;
      /*parameter1 value passing to $scope.parameterTest[i]*/
      console.log($scope.parameterTest[i]);
    }
  }
}

I am passing exercise object to the function.From the exercise object I am setting values and passing in JSON format and storing it in variable parameter1.

I want to set every object selected in dropdown to be set in this format thats why I am iterating every object and setting the format and value.

But now if I select one option from dropdown it is displaying that object and setting the correct value and format.But if i select multiple options then for 2 options it is displaying like this

First object value set in JSON Format
Object {exid: "59bc2dbc53bdcb7171732eab", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}

Second object value set in JSON Format Object {exid: "59bc2d9453bdcb7171732eaa", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}

Second option displaying second time Object {exid: "59bc2d9453bdcb7171732eaa", modify: 0, sets: 3, reps: Array[6], rest_duration: 60…}

If I select two options it is displaying first object once and second object twice.

I dont know where I am doing wrong. Am I doing looping correctly?

Answer 1

May be what you are doing is wrong.

JSfiddle for working sample code

I'm little confused about the code in "else" block where you push the "exercise" object to "$scope.parameterTest" array then iterate and assign a different object obtain from the same "exercise" object to the "$scope.parameterTest" array.

And I think where you check for existing "exercise" object in the "$scope.parameterTest" is wrong, since you change the "exercise" object saved in the "$scope.parameterTest" from assigning the "parameter1" value.

$scope.parameterTest[i] = parameter1;

If you really need to modify the exercise object then change

var idx = $scope.parameterTest.indexOf(exercise);

to

var exerciseItemFoundInArray = false;
var exerciseItemFoundIndex = -1;
for(var i = 0; i < $scope.parameterTest.length; i++) {
    if ($scope.parameterTest[i].exid == exercise._id) {
        exerciseItemFoundInArray = true;
        exerciseItemFoundIndex = i;
        break;
    }
}

if (exerciseItemFoundInArray == true && exerciseItemFoundIndex != -1) 
{
    $scope.parameterTest.splice(idx, 1);
}

or to find the index use below this is supported by all most all the browsers(IE - 12, Chrome 45 etc)

var idx = $scope.parameterTest.findindex((item)=> {return item.exid == exercise._id});

And I have removed your "for" loop since it is unnecessary. The revised code for function "toggleExerciseSelection"

$scope.toggleSelectionExercise = function
toggleSelection(exercise) {
    var exerciseItemFoundInArray = false;
    var exerciseItemFoundIndex = -1;
    for(var i = 0; i < $scope.parameterTest.length; i++) {
        if ($scope.parameterTest[i].exid == exercise._id) {
            exerciseItemFoundInArray = true;
            exerciseItemFoundIndex = i;
            break;
        }
    }

    if (exerciseItemFoundInArray == true && exerciseItemFoundIndex != -1) 
    {
        $scope.parameterTest.splice(exerciseItemFoundIndex, 1);
        console.log( $scope.parameterTest);
    } else {
        var parameter1 = {
            "exid": exercise._id,
            "modify": 0,
            "sets": exercise.sets,
            "reps": exercise.reps,
            "rest_duration": 60,
            "ord": 0
        };
        $scope.parameterTest.push(parameter1);
        console.log( $scope.parameterTest);
    }
};

Answer 2

Try doing this ng-change and ng-model for select In HTML

<select ng-model="is_checked" ng-change="hey(is_checked)" multiple>
  <option ng-repeat="x in names">{{x}}</option>
</select>

In Controller is_checked returns the option clicked check if the option is already in list if not add it else splice it.

$scope.checkedvalues = [];
$scope.hey = function(is_checked){
    var option = $scope.checkedvalues.indexOf(is_checked);
    // if option in list 
        $scope.checkedvalues.splice(option,1);
    }else{
        $scope.checkedvalues.push(is_checked);
    }
}