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?

Can you explain what you are trying to achieve inside the else block by pushing the "exercise" object to parameterTest and again trying to modify it inside an array ? — Shashith Darshana
– Shashith Darshana, Commented Dec 14, 2017 at 4:39
I am just pushing it into one array called parameterTest and iterating in for loop and assigning the json format for every object and passing to parameterTest[i] — Sachin HR
– Sachin HR, Commented Dec 14, 2017 at 4:46

Shashith Darshana · Accepted Answer · 2017-12-14 10:06:44Z

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

If i select three options then only third option is getting passed and also it is passing three times.1st and 2nd selected options are not getting passed
just to clarify if you select a previously selected option, you want to remove that right ?
I have added some edits. let me know the error if it is not working
Do i need to change anything in my html?And one more thing is where can i specify Json format in the code.var parameter1 = { "exid": exercise._id, "modify": 0, "sets": exercise.sets, "reps": exercise.reps, "rest_duration": 60, "ord": 0 };

Ujjwala Bollam · Accepted Answer · 2017-12-14 05:01:46Z

0

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

answered Dec 14, 2017 at 5:01

Ujjwala Bollam

1599 bronze badges

4 Comments

Sachin HR Over a year ago

But i want exercise object in controller function because i need to set values from exercise object to json format

Ujjwala Bollam Over a year ago

pass the object to value in option that is what you get in ng-model.

Sachin HR Over a year ago

Can u tell what condition i have to give in "if" inside function

Ujjwala Bollam Over a year ago

I hope this will help you codecademy.com/en/forum_questions/50721fce7c7091000201e56a We have to check if a value of a key in dic exists in the list if yes then get to know the index of the element/object and delete it.

Collectives™ on Stack Overflow

Iterating over array of objects in Javascript

2 Answers 2

10 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Related