AngularJS - Update json information

Question

First of all sorry if this question was asked before but i couldn't find an answer to it. Also , i am very new to angular so if the question seems stupid then sorry. So, onward to business.

I am trying to build an AngularJS app that (for now) uses $http to get a json, displays the info inside in the view and when you press a button for example , the info in the view changes. I`ve managed to get the $http request and display it , but i can't for the life of me figure out how to manipulate the json data that i got. I've tried storing the data inside another variable using things like JSON.parse() and angular.toJSON but none seem to work. How can i go about doing this?

Here is the code I have so far:

<body ng-controller="MessageController">

   <table>
     <thead><tr><th rowspan="4" scope="col">Studenti</th></tr></thead>
     <tbody>
     
      <tr>
        <td>Nume:</td>
        <td ng-repeat = "student in students">{{student.name}}</td>
      </tr>
      <tr>
        <td>Skill:</td>
        <td ng-repeat = "student in students">{{student.skill}}</td>
      </tr>
      <tr>
        <td>Oboseala:</td> 
        <td ng-repeat = "student in students">{{student.oboseala}}</td>
      </tr> 
      
     </tbody>     
  </table>
    
    <button ng-click="changePcStatus()">Turn on Computer</button>
    <p>Pc state: {{pcState}}</p>
    
    
  </body>

and the Controller :

var nameSpace = angular.module('myApp.controllers', []);

nameSpace.controller('MessageController', [ '$scope', '$http', function($scope, $http)
{                                     
  
  
    $http.get('js/data.json').success(function(data){
      $scope.students = data;
    }).error(function(data, status, headers, config) {                                
      alert("error");
                                                      
    });
      
  var pcStatus = false;
  var counter = 0;
  $scope.pcState = "Off"
  
    $scope.changePcStatus = function(){
    
      if(counter === 0){
    $scope.pcState = "On";
    pcStatus = true;
      counter++;
        
    } else {
    alert("The pc was already turned on once!");
    };
    
      
    }; 
  
  
      }]);

Basically , what I want to do is , when i press the "Turn on computer" button , the "skill" off each student should go up a few points and this should be reflected in the view.

Edit: This seems to have worked. Thank you very much. @Cerad said if i have more info in the data.json i would have to change the statement. how so? (i do have more). It seems that $scope.students can only be accesed inside the .success. if i try to work with it outside the .success function it just breaks the app (is $scope.students just a local variable? if so how would i go about making it accesable globally?).

Why don't you use a for statement for '$scope.students' and add points to every student ? I didn't understand well what you're asking — Cosmin
– Cosmin, Commented Mar 19, 2015 at 15:33

Chris Noring · Accepted Answer · 2015-03-19 15:40:22Z

1

I agree with the previous answer. Why not just do

$scope.changePcStatus = function(){
    $scope.students.forEach(function(student){
        if(student.hasOwnProperty('skill')){
            student.skill++;
        }else{
            student.skill =0;
        }
    });

 // your code


};

answered Mar 19, 2015 at 15:40

Chris Noring

4713 silver badges9 bronze badges

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

Comments

Cerad · Accepted Answer · 2015-03-19 15:59:00Z

1

Update #2:

I think @luiscarlosch has spotted the real problem. Your view stuff is not working at all right? $http.get returns a json string which you need to convert to student objects:

$http.get('js/data.json').success(function(data)
{
  $scope.students = angular.fromJson(data);
  console.log($scope.students[0]);
});

Your data.json needs to contain a simple array of students. If you have more information in it then your $scope.students assignment will need to change.

Update #1: Looks like @Chris beat me by two minutes. Oh well.

I'm not positive that this is what you are asking for but, as @Kosmo suggested, you would loop through students and update their skill. Something like:

$scope.changePcStatus = function()
{
    if ($scope.pcState == 'Off')
    {
        $scope.pcState = "On";
        $scope.students.forEach(function(student) {
            student.skill += 3;
        });
    }
    else alert("The pc was already turned on once!");
};

Of course this only updates the view. You would still need some additional work to update the server side database.

edited Mar 19, 2015 at 15:59

answered Mar 19, 2015 at 15:43

Cerad

49k9 gold badges92 silver badges94 bronze badges

1 Comment

Cosma George Over a year ago

This seems to have worked. Thank you very much. Seems I just needed to convert it to an object in the $http.get.

Luis Carlos Chavarría · Accepted Answer · 2015-03-19 15:39:36Z

0

Could you try to log the result first to see what are you actually getting:

console.log(data);

Then you can parse it

$scope.students = JSON.parse(data);

Then you can manipulate it.

answered Mar 19, 2015 at 15:39

Luis Carlos Chavarría

3,8992 gold badges28 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS - Update json information

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related