How to refresh controller to change/refresh JSON call in AngularJS?

Question

I am a new AngularJS learner.

My code is calling a JSON file and displays the output. However, I want the call to change the JSON call based on change in certain variable (i.e. KeyWord).

Here is the HTML part:

<body ng-controller="AppController">

  <button type="button" class="btn btn-danger" ng-click="ChangeKW()">
    Click to Change KeyWord
  </button>


  <div ng-controller="customersController as custCont" ng-model="keyWord">
    KeyWord:{{ keyWord }} ==== iter:{{ iter }}
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
  </div>

</body>

And here goes the Controller part:

  var app = angular.module('App', []);

  app.controller('AppController', function($scope, $window) {

    $scope.keyWord = 3;
    $scope.iter = 1;

    $scope.ChangeKW = function() {
      if ( $scope.keyWord === 3 )
        $scope.keyWord = 1;
      else
        $scope.keyWord = $scope.keyWord + 1;
    }
  });

  app.controller("customersController", function($scope, $http) {

    $scope.iter = $scope.iter + 1;
    $http({
      url: 'test' + $scope.keyWord + '.txt',
      dataType: 'json',
      method: 'GET',
      data: '',
      headers: {
        "Content-Type": "application/json"
      }
    }).success(function(response) {
      $scope.names = response;
    }).error(function(error) {
      $scope.names = [{
        "Name": "Errrrrrr"
      }];
    });

  });

I want the program to load respective JSON file text1.txt, text2.txt or text3.txt based on value of KeyWord variable, which can be changed by clicking on the red button. I have defined mg-model="KeyWord" in HTML, which changes the value of {{ KeyWord }} in the output but it doesn't send refresh JSON call/output. The initial file loaded is tex3.txt (all three files can be distinguished from 1st record).

The Plunker can be found here: Plunker.

Manube · Accepted Answer · 2015-02-08 18:55:26Z

1

you probably need:

$scope.$watch('keyWord',function()
  {
    //$http call here 
  }
);

the ‘$watch‘ will make the $http call automatically, each time $scope.keyWord changes.

answered Feb 8, 2015 at 18:55

Manube

5,2294 gold badges38 silver badges61 bronze badges

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

7 Comments

AnR Over a year ago

I have added $watch and specifically called the loadData function also without any success. Also change the controller to a function. Kindly have a look at the updated code: plnkr.co/edit/G9JfRo?p=preview

Manube Over a year ago

please remove $scope.loadData() from ChangeKW, and move $scope.loadData function to AppController

AnR Over a year ago

I have moved it out of customersControler. See updated Plunker plnkr.co/edit/G9JfRo?p=preview But now it doesn't work at all

Manube Over a year ago

had to inject $http in AppController

AnR Over a year ago

Sorry, how? I have just started AngularJS. Would appreciate your help.

|

halfer · Accepted Answer · 2018-08-31 22:31:28Z

(Posted on behalf of the question author).

Here is the final solution that I found out with the help of @Manube:

HTML

<body ng-controller="AppController">

      <button type="button" class="btn btn-danger" ng-click="ChangeKW()">
        Click to Change KeyWord
      </button>


  <div ng-controller="customersController as custCont" ng-model="keyWord">
    KeyWord:{{ keyWord }} ==== iter:{{ iter }}
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
  </div>

</body>

This is the Controller code

(function() {
  var app = angular.module('App', []);

  app.controller('AppController', function($scope, $window,$http) {

    $scope.keyWord = 3;
    $scope.iter = 1;

    $scope.ChangeKW = function() {
      if ($scope.keyWord >2)
        $scope.keyWord = 1;
      else
        $scope.keyWord = $scope.keyWord + 1;
    };

    $scope.loadData = function() {
      $scope.iter = $scope.iter + 1;
      $http({
        url: 'test' + $scope.keyWord + '.txt',
        dataType: 'json',
        method: 'GET',
        data: '',
        headers: {
          "Content-Type": "application/json"
        }
      }).success(function(response) {
        $scope.names = response;
      }).error(function(error) {
        $scope.names = [{
          "Name": "Errrrrrr"
        }];
      });
    };

    $scope.$watch('keyWord', function() {
      $scope.loadData();
    });


    $scope.customersController = function($scope, $http) {

      $scope.loadData();
    };


  });


})();

And a working Plunker can be found here: Plunker Link

Collectives™ on Stack Overflow

How to refresh controller to change/refresh JSON call in AngularJS?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related