CODEWITHSUNDEEP
javascriptangularjs
naik bm
naik bm

Reputation: 37

Angularjs on JSON data

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

Upvotes: 0

Views: 188

Answers (3)

Salman Ullah Khan
Salman Ullah Khan

Reputation: 728

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

Upvotes: 0

Irvin Sandoval
Irvin Sandoval

Reputation: 751

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

Upvotes: 0

bluetoft
bluetoft

Reputation: 5443

You've got several things wrong here.

  1. 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>

  2. You didn't declare myapp correctly. Use angular.module('myapp',[]) instead of angular.module('myapp')

  3. 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

Upvotes: 1

Related Questions