ng-repeat is not working when try to get data from a service

Question

I am building an app using Node JS and Angular JS. I got the data as response from the Back end. But failed to show the data in UI.

my code is like below,

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

app.controller('appCtrl', ['$scope', '$http', 'storeData', function ($scope, $http, storeData) {

    $scope.searched = []
    $scope.locationSearch = function () {
        google.maps.event.addDomListener(window, 'load', function () {

            // get data from Google Api
            $scope.places = new google.maps.places.Autocomplete(document.getElementById('searchPlaces'));
            google.maps.event.addListener($scope.places, 'place_changed', function () {

                // set the corresponding field 
                $scope.place = $scope.places.getPlace();
                $scope.address = $scope.place.formatted_address;
                $scope.latitude = $scope.place.geometry.location.lat();
                $scope.longitude = $scope.place.geometry.location.lng();
                $scope.mesg = "Address: " + $scope.address + "\nLatitude: " + $scope.latitude + "\nLongitude: " + $scope.longitude;

                // call the service
                $scope.searched = storeData.putData({ "userId": '6235', "place": $scope.address, "latitude": $scope.latitude, "longitude": $scope.longitude })

            })
        })
    }
}])

app.service('storeData', ['$http', function ($http) {
    // this.searchResults = []
    this.putData = function (place) {

        // call the back end
        return new Promise(function (resolve, reject) {
            $http({
                method: 'POST',
                url: '/store',
                headers: 'Content-Type: application/json',
                data: place
            })
        }).then(function (success) {
            console.log(success.data)
            // this.searchResults = success.data
            return success.data
        }).catch(function (err) {
            console.log('unable to process request')
        })
    }
}])

I am using Google Location api to get a place search box. All the data is ok. They are sent to the back end correctly. And response is coming good.

I have used Chrome Developer tools to check the response. Response it Good. But I am unable to show it in the UI.

My HTML code is like below,

<table class="table" ng-controller="appCtrl">
                            <tr ng-repeat="result in searched">
                                <td>{{result.place}} </td>
                                <td>{{result.latitude}} </td>
                                <td>{{result.longitude}} </td>
                            </tr>
                        </table>

Somehow I have to manage the $scope.searched to show the data. Can you please tell what is wrong in the code ?? And how to correct it?? I want to use the Service to call the back end and send the output to the Controller.

Possible duplicate of [AngularJS factory http returns empty](http://stackoverflow.com/questions/16336987/angularjs-factory-http-returns-empty) — Alon Eitan, May 04 '17 at 13:39
I strongly recommend you to have a look at the following : http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Deblaton Jean-Philippe, May 04 '17 at 13:42
You don't need to wrap `$http.post` into a promise. It's already a promise. — Deblaton Jean-Philippe, May 04 '17 at 13:44
a controller is always run after the window has been loaded. You don't need to register such event. You're just leaving angular scope, and angular won't notice the controller updated some of the data that need to be displayed in the view — Deblaton Jean-Philippe, May 04 '17 at 13:45

Saurabh Tiwari · Accepted Answer · 2017-05-05T15:42:14.980

1

You need to resolve promise correctly and assign the resolved data to your $scope variable. Currently your $scope variable has promise and not the data. Try this:

 var searchedPromise = storeData.putData({ "userId": '6235', "place": $scope.address, "latitude": $scope.latitude, "longitude": $scope.longitude });
    searchedPromise.then(storeData.promiseResolvingFnInService);
    $scope.searchResults = storeData.searchResults;

and

app.service('storeData', ['$http', function ($http) {
    this.searchResults = [];
    this.promiseResolvingFnInService =  function(response){
      this.searchResults = response.data; //assuming array is inside data prop of API response.
   }
    this.putData = function (place) {

        // call the back end
        return 
            $http({
                method: 'POST',
                url: '/store',
                headers: 'Content-Type: application/json',
                data: place
            });
    }
}])

This should help.

edited May 05 '17 at 15:42

answered May 04 '17 at 13:55

Saurabh Tiwari

4,632
9
42
82

thanks this works. Another thing, can I store it in a Array of the storeData service and access it in my HTML. If yes, can you give me the code ? – Anijit Sau May 05 '17 at 11:52
You can store anything in your service. But in your HTML you can use only the data/variable/objects which you have on your `$scope` – Saurabh Tiwari May 05 '17 at 15:34
Updated my answer for your use. Now the promise resolution is done by service function and the scope array is assigned to service array. – Saurabh Tiwari May 05 '17 at 15:43

ng-repeat is not working when try to get data from a service

1 Answers1