CODEWITHSUNDEEP
jsonangularjs
Cosma George
Cosma George

Reputation: 3

AngularJS - Update json information

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?).

Upvotes: 0

Views: 96

Answers (3)

Cerad
Cerad

Reputation: 48865

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.

Upvotes: 1

Chris Noring
Chris Noring

Reputation: 471

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


};

Upvotes: 1

Luis Carlos Chavarr&#237;a
Luis Carlos Chavarr&#237;a

Reputation: 3881

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.

Upvotes: 0

Related Questions