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.

I strongly recommend you to have a look at the following : stackoverflow.com/questions/14994391/… — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented May 4, 2017 at 13:42
You don't need to wrap $http.post into a promise. It's already a promise. — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented May 4, 2017 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
– Deblaton Jean-Philippe, Commented May 4, 2017 at 13:45

Saurabh Tiwari · Accepted Answer · 2017-05-05 15:42:14Z

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 5, 2017 at 15:42

answered May 4, 2017 at 13:55

Saurabh Tiwari

5,27911 gold badges52 silver badges91 bronze badges

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

3 Comments

Anijit Sau Over a year ago

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 ?

Saurabh Tiwari Over a year ago

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 Over a year ago

Updated my answer for your use. Now the promise resolution is done by service function and the scope array is assigned to service array.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related