Angularjs on JSON data

Question

Actually I was doing some calculation operations on JSON data using angularJS , Can any one please help me in solving this problem . enter code hereCode snippet. If you look at "script.js" file , there is a JSON data "marksArray" , I have to calculate total marks per student (For Example - abc's total marks is 85) and also have to count how many students are there (separate count like - abc:2 , pqr:2 , xyz:3). Please help me to solve this problem.

Html:

<!DOCTYPE html>


<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp">
    <div ng-controller="mainController">
      <label for="repeatSelect1"> Field 2: </label>
      <select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1">
    <option ng-repeat="(key, val) in marksArray[0]" value="{{val}}">{{key}}</option>
  </select>
      <br />
      <strong>Selected student:</strong>
      <br />
      <textarea>{{chosen | json}}</textarea>
      <br />
      <br />
    </div>
  </body>

</html>

Javascript

angular.module('myapp')
.controller("mainController", function ($scope){

    $scope.marksArray = [
      {name: "abc", Marks: "50"},
      {name: "xyz", Marks: "44"},
      {name: "abc", Marks: "35"},
      {name: "xyz", Marks: "55"},
      {name: "pqr", Marks: "67"},
      {name: "xyz", Marks: "65"},
      {name: "pqr", Marks: "45"}
    ];
  });

please paste your code here so that people do not have to navigate. — Mohayemin
– Mohayemin, Commented Feb 15, 2016 at 5:10
Well Naik, I wanted to mean pasting in the question, not in comments. :) I see you have already added code in the question. Great :) — Mohayemin
– Mohayemin, Commented Feb 15, 2016 at 5:22

bluetoft · Accepted Answer · 2016-02-15 05:25:04Z

1

You've got several things wrong here.

You forgot to include angular.js: <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
You didn't declare myapp correctly. Use angular.module('myapp',[]) instead of angular.module('myapp')
Don't use ng-repeat on options, instead use ng-options. <select name="repeatSelect1" ng-options="item as item.name for item in marksArray" id="repeatSelect1" ng-model="chosen"></select>

Add this to display the total of the chosen item:

$scope.updateTotal = function(item) {
      var t = 0;
      $scope.marksArray.forEach(function(i) {
        if(i.name == item.name){
          t += parseInt(i.Marks,10);
        }
      });
      $scope.total = t;
    }

plnkr

edited Feb 15, 2016 at 5:25

answered Feb 15, 2016 at 5:13

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

naik bm Over a year ago

thank you very much for the reply , but it is displaying the values as it is . If you select "abc" it has to display total marks of "abc:85" . please help me.

naik bm Over a year ago

Thank you very much @bluetoft,you have given me proper code , I will try to do small changes. If I didn't get it , I will come back to you. Thank you :)

naik bm Over a year ago

Hi bluetoft , can you please help me to do changes. Instead of selecting student name from drop down selection , can we generalize to just "name" and once we select "name " field from drop down selection , Is it possible to change output json format something like {"abc":2,"xyz":3,"pqr":2} , maintain count.

Irvin Sandoval · Accepted Answer · 2016-02-15 06:00:55Z

html

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myapp">
  <div ng-controller="mainController">
    <label for="repeatSelect1"> Student: </label>
    <select name="repeatSelect1" id="repeatSelect1" ng-model="selectedStudent">
      <option value=""> --Choose a student--</option>
      <option ng-repeat="student in students" value="{{student}}">{{student}}</option>
    </select>
    <br />
    <strong>Selected student:</strong> {{selectedStudent || 'no one'}}
    <br />
     <div ng-show="selectedStudent">
       <span>total marks:</span> {{totalMarksPerStudent(selectedStudent)}}  </br>
      <span>student count:</span> {{ totalStudentCount(selectedStudent) }}
     </div>
    <br />
    <br />
  </div>
</body>

</html>

script

angular.module('myapp',[])
.controller("mainController", function ($scope)
  {
    $scope.marksArray = [
      {name: "abc", Marks: "50"},
      {name: "xyz", Marks: "44"},
      {name: "abc", Marks: "35"},
      {name: "xyz", Marks: "55"},
      {name: "pqr", Marks: "67"},
      {name: "xyz", Marks: "65"},
      {name: "pqr", Marks: "45"}
    ];

    $scope.students = [];


    (function(){
      var auxArray = [];
       for (var i = 0; i < $scope.marksArray.length; i++){

           if(typeof auxArray[$scope.marksArray[i].name] === 'undefined'){
                $scope.students.push($scope.marksArray[i].name);
                auxArray[$scope.marksArray[i].name] = 1;
           }
       }
    })();

    $scope.totalMarksPerStudent = function(studentName){
      var marks = 0;

      for (var i = 0; i < $scope.marksArray.length; i++){
         if($scope.marksArray[i].name === studentName){
           marks = marks + parseInt($scope.marksArray[i].Marks);
         }
      }
      return marks
    }

    $scope.totalStudentCount =  function(studentName){
      var studentCount = 0;
      for (var i = 0; i < $scope.marksArray.length; i++){
          if($scope.marksArray[i].name === studentName)
            studentCount++;
      }

      return studentCount
    }
  });

plunker url: http://plnkr.co/edit/TEAr9yaf47VlaiYaxBKN

Pardeep Dhingra · Accepted Answer · 2016-02-15 06:56:17Z

0

var totalMarks = 0;

$scope.marksCount = function(studentName) {
  for (var i = $scope.marksArray.length - 1; i >= 0; i--) {
    if (studentName == $scope.marksArray.name[i]) {
      var totalMarks = totalMarks + $scope.marksArray.Marks[i];
    }
  }
}

edited Feb 15, 2016 at 6:56

Pardeep Dhingra

3,9467 gold badges35 silver badges57 bronze badges

answered Feb 15, 2016 at 5:17

Salman Ullah Khan

71810 silver badges29 bronze badges

1 Comment

naik bm Over a year ago

Thanks for your reply , I will try that and I will get back to you.

Collectives™ on Stack Overflow

Angularjs on JSON data

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related