current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I would like to display data returned from service call into view:

Service Code :

.service('HomeExchangeList', function ($rootScope, $http, $log) {
    this.getHomeExchange = function() {
        var rates = $http({
            method: 'GET',
            url: 'http://localhost:8080/feeds/homerates_android.php'
        }).success(function (data) {
            $log.log(data);
            return data;

        });

        return homeRates;
    };
})

JSON Data returned by service

            {
               "record":[
                  {
                     "Name":"GBP\/USD",
                     "Ticker":"GBP\/USD",
                     "Price":"0.5828",
                     "Open":"0.5835",
                     "High":"0.5848",
                     "Low":"0.5828",
                     "PercentagePriceChange":"0.1371",
                     "Movement":"0.0800",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"EUR\/USD",
                     "Ticker":"EUR\/USD",
                     "Price":"0.7330",
                     "Open":"0.7344",
                     "High":"0.7351",
                     "Low":"0.7327",
                     "PercentagePriceChange":"0.2585",
                     "Movement":"0.1900",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"GHS\/USD",
                     "Ticker":"GHS\/USD",
                     "Price":"3.3350",
                     "Open":"3.2650",
                     "High":"3.3500",
                     "Low":"3.2650",
                     "PercentagePriceChange":"0.8915",
                     "Movement":"3.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"KES\/USD",
                     "Ticker":"KES\/USD",
                     "Price":"87.7000",
                     "Open":"86.2970",
                     "High":"87.6500",
                     "Low":"86.1800",
                     "PercentagePriceChange":"0.0661",
                     "Movement":"5.8000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"MUR\/USD",
                     "Ticker":"MUR\/USD",
                     "Price":"30.2925",
                     "Open":"29.1460",
                     "High":"29.4300",
                     "Low":"29.0500",
                     "PercentagePriceChange":"-0.0909",
                     "Movement":"-2.7500",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"MWK\/USD",
                     "Ticker":"MWK\/USD",
                     "Price":"393.5000",
                     "Open":"393.3900",
                     "High":"393.3900",
                     "Low":"385.0000",
                     "PercentagePriceChange":"-0.2548",
                     "Movement":"-100.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"NGN\/USD",
                     "Ticker":"NGN\/USD",
                     "Price":"162.3000",
                     "Open":"160.0600",
                     "High":"162.4000",
                     "Low":"160.0600",
                     "PercentagePriceChange":"0.2459",
                     "Movement":"40.0000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"ZAR\/USD",
                     "Ticker":"ZAR\/USD",
                     "Price":"10.6659",
                     "Open":"10.6751",
                     "High":"10.7162",
                     "Low":"10.6523",
                     "PercentagePriceChange":"0.9840",
                     "Movement":"10.6000",
                     "DateStamp":"2014\/07\/09",
                     "TimeStamp":"22:15:00"
                  },
                  {
                     "Name":"ZMK\/USD",
                     "Ticker":"ZMK\/USD",
                     "Price":"47.7014",
                     "Open":"47.3850",
                     "High":"47.7000",
                     "Low":"46.8900",
                     "PercentagePriceChange":"0.0067",
                     "Movement":"0.3165",
                     "DateStamp":"2013\/07\/27",
                     "TimeStamp":"01:55:00"
                  }
               ]
            }

Controller code

function HomeCtrl($scope, Page, $location, HomeExchangeList) {

    $scope.rates = HomeExchangeList.getHomeExchange();
    $scope.$on('HomeExchangeList', function (event, data) {
        $scope.exchangeRates = data;
    });
}

View

<ul id="home-rates"  ng-repeat="rate in exchangeRates">
    <li><span class='rate-symbol'>{{rate.Name}}</span><span class='rate-amount'>{{rate.Price}}</span></li>
</ul>

I would like to display the data returned by in the service in the view but it doesn't seem to be working. Please help

share|improve this question

3 Answers 3

up vote 0 down vote accepted

First, $http invocations all return a promise, not the result of your request. Your service should just return the result of the $http call, and your controller needs to attach a .success handler to receive the data and set it on the scope of your controller.

.service('HomeExchangeList', function ($rootScope, $http, $log) {
    this.getHomeExchange = function() {
        var rates = $http({
            method: 'GET',
            url: 'http://localhost:8080/feeds/homerates_android.php'
        }).success(function (data) {
            $log.log(data);
            // removed your return data; it doesn't do anything, and this success is only added to log the result. if you don't need the log other than for debugging, get rid of this success handler too.   
        });

        return rates;
    };
})


function HomeCtrl($scope, Page, $location, HomeExchangeList) {
    HomeExchangeList.getHomeExchange().success(function(data) {
        $scope.exchangeRates = data;
    });
}

Second, the root of your JSON is not an array, so you can't enumerate through just exchangeRates alone. Perhaps you meant exchangeRates.record.

share|improve this answer
    
Thank.. this is working to a certain extent but the resulting exchangeRates.record used in ng-repeat="rate in exchageRates.record" is only displaying one record. Am i mission something?? –  munya.nyika Jul 9 '14 at 22:20
    
@munya.nyika See the demo I put together here plnkr.co/edit/oJPLZUpzYG3NEwsf1G9M?p=preview and compare my service and controller declarations in scripts.js to yours, as well as the HTML in my index to yours. It works as I described once you change your repeater to use exchangeRates.record (alternately, you could just assign $scope.exchangeRates = demo.record; in your controller). –  HackedByChinese Jul 10 '14 at 0:07
    
Awesome...works perfectly. Thanks for the help. –  munya.nyika Jul 10 '14 at 9:54
up vote 0 down vote

try to assign data.record to $scope.exchangeRates instead of data... as data doesnt hold the array of records... it holds record which then holds the array

share|improve this answer
up vote 0 down vote

First of all, your service function always returns undefined:

var rates = ...,
return homeRates;

It should be

return rates;

Second, once that is fixed, the service doesn't return data. It returns a promise, and you can't iterate on a promise. What you need in the controller is:

HomeExchangeList.getHomeExchange().then(function(data) {
    $scope.rates = data.record;
}

The call to $scope.$on doesn't make any sense. $scope.$on is used to listen for events. Not to get data from a promise.

And finally, your view must iterate over these retes, and not over exchangeRates:

ng-repeat="rate in rates">
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.