Refreshing data after a JSON call in Angular

Question

I have an angular model which gets the data through a JSON call and shows as follows. After making a second JSON how can I refresh this list.

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

I inject the data initially through this:

 $http.get("").success(function (response) {$scope.names = courseParsed;});

You can check it out below. http://findcourse.parseapp.com/

I am adding the full code to make it easier, through the "Select and Search" Button ($scope.names[0].name = "test"; $scope.names.splice(1, 1)), I am trying to modify the list, even though it worked once, now it is not working at all.

var app = angular.module('myApp', []);
var  queryParam ={};

app.controller('customersCtrl', function($scope, $http, $q) {

  Parse.$ = jQuery;
   Parse.initialize("mvLeLP1wbRJW24ESjaUEgPueWHpMLNZNvwLnTTJW",  //"applicationId":
                   "NqwHrO9MjC9uLgqu4zNIi6u9TC19GVRbMmNxXTag");  //JavaScript Key

   var Article = Parse.Object.extend('coursesParse');

     $scope.master = {};
      $scope.update = function(user) {
        //$scope.master = angular.copy(user);
        //alert(user.degree+" "+user.industry);
         //alert($scope.names[0].name);
         $scope.names[0].name = "test";
         $scope.names.splice(1, 1);
      };

      var myLat = -37.875773;
      var myLng = 145.087829;
      if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(getPosition);
           } else {
                    alert("Please allow using your location to see the courses around you!");
      }
      function getPosition(position) {
                      myLat = position.coords.latitude;
                      myLng = position.coords.longitude; 
                    var mapOptions = {
                     center: new google.maps.LatLng(myLat, myLng),
                     zoom: 12,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                     }
                       map = new google.maps.Map(document.getElementById('map'), mapOptions);
      }

         var ArticleDfd = $q.defer();
         var queryInitial = new Parse.Query(Article);
         //queryInitial.equalTo('name', 'Electrical Supply');
          var geoPoint = ({latitude: myLat, longitude: myLng});
          queryInitial.near("coords", geoPoint);
          queryInitial.limit(4);

        queryInitial.find().then(function (data) {
           var courseParsed = [];
           for (var i = 0; i < data.length; i++) {
               courseParsed[i] = {
                 "name": data[i].get('name'), 
                 "description": data[i].get('description'), 
                 "length": data[i].get('length'), 
                 "place": data[i].get('place'), 
                 "comment": data[i].get('comments'), 
                 "image": data[i].get('images'),
                 "webLink": data[i].get('weblink'),
                 "xCor": data[i].get('coords').latitude,
                 "yCor": data[i].get('coords').longitude
                };
              //for (var prop in courseParsed[i]) {alert(prop + " = "+ courseParsed[i][prop])};
            }
                      for(var i=0;i<courseParsed.length;i++){
                        //alert(courseParsed[i]['xCor'], courseParsed[i]['yCor']);
                        //alert(courseParsed[i]['xCor']);
                       var marker = new google.maps.Marker({
                         position: new google.maps.LatLng(courseParsed[i]['xCor'], courseParsed[i]['yCor']),
                         //icon: "img/icon.png",
                         map: map,
                         title: 'Hello World!'
                       });
                      }
              ArticleDfd.resolve(data);
              $http.get("").success(function (response) {$scope.names = courseParsed;});

           }, function (error) {
            ArticleDfd.reject(data);
        });
        ArticleDfd.promise
        .then(function (article) {
         $scope.currentArticle = article;
        })
       .catch(function (error) {
            //do something with the error
       });

});

HTML page:

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/effect.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/app.css">
<body>


<div ng-app="myApp" ng-controller="customersCtrl">

  <div id="map">Loading...</div>

  <div id="searchForm" ng-controller="customersCtrl">
    <form novalidate>
        <select type="text" ng-model="user.degree">
            <option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
        </select>
        <select type="text" ng-model="user.industry">
            <option>Finance</option><option>Construction</option><option>Energy and Power</option>
        </select>
        <!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
          <input type="radio" ng-model="user.gender" value="female" />female<br />
          <input type="button" ng-click="reset()" value="Reset" /> 
           <pre>user = {{user | json}}</pre>
            <pre>master = {{master | json}}</pre>-->
      <input type="submit" ng-click="update(user)" value="Select and Search" />
    </form>
  </div>

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

        <!--<p> {{ x.length + ', ' + x.description }} 
            <p> {{ x.comment }} </p> </p> -->


</div>

</body>
</html>

Answer 1

All you have to do is to move your ul inside the div above.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/effect.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="css/app.css">
<body>


<div ng-app="myApp" ng-controller="customersCtrl">

  <div id="map">Loading...</div>

  <div id="searchForm" ng-controller="customersCtrl">
    <form novalidate>
        <select type="text" ng-model="user.degree">
            <option>Diploma</option><option>Advanced Diploma</option><option>Certificate III</option>
        </select>
        <select type="text" ng-model="user.industry">
            <option>Finance</option><option>Construction</option><option>Energy and Power</option>
        </select>
        <!-- Gender: <input type="radio" ng-model="user.gender" value="male" />male
          <input type="radio" ng-model="user.gender" value="female" />female<br />
          <input type="button" ng-click="reset()" value="Reset" /> 
           <pre>user = {{user | json}}</pre>
            <pre>master = {{master | json}}</pre>-->
      <input type="submit" ng-click="update(user)" value="Select and Search" />
    </form>

     <ul ng-repeat="x in names">
            <a href="{{x.webLink}}"><h3> {{ x.name  }} </h3></a>
        <h4> {{ x.place }} </h4>
      <p> <img ng-src="{{x.image}}"> </p> 
   </ul>

  </div>

</div>

</body>
</html>

Answer 2

I think you need to place your $http call in $scope.getData function & call it again whenever you wanted to reload data. ng-repeat will do the magic for you of refreshing data as any change occurred in names object. Basically any change in names will render those many ul's on view.

Answer 3

after calling second JSON. assign result to 'names' variable. then use following code

$route.reload();