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 2 down vote favorite

I'm having a weird issue using ng-repeat on the JSON response from the Google PageSpeed API. Basically, I have it working BUT it is oddly returning an odd BLANK UL before followed by the correct reply.

Test page: http://staging.converge.io/test-json

My controller: (will change the API key once this gets answered)

function FetchCtrl($scope, $http, $templateCache) {
    $scope.method = 'GET';
    $scope.url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://www.web.com&key=AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
    $scope.key = 'AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc';
    $scope.strategy = 'mobile';

    $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;

        $http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
        }).
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

    $scope.updateModel = function(method, url) {
        $scope.method = method;
        $scope.url = url;
    };
}

HTML:

            <ul ng-repeat="formattedResult in data.formattedResults">
                <li ng-repeat="ruleResult in formattedResult">
                    <h4>{{ruleResult.localizedRuleName}}</h4>
                    <strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0}}
                </li>
            </ul>

Thanks for any help!

share|improve this question

1 Answer 1

up vote 1 down vote accepted

As I can see in the response, formattedResults is not an array, it's an object containing an array of ruleResults. You need to change the way you access your data.

Replace:

<ul ng-repeat="formattedResult in data.formattedResults">
            <li ng-repeat="ruleResult in formattedResult">
                <h4>{{ruleResult.localizedRuleName}}</h4>
                <strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0}}
            </li>
        </ul>

With

<ul>
     <li ng-repeat="ruleResult in data.formattedResults.ruleResults">
             <h4>{{ruleResult.localizedRuleName}}</h4>
             <strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0}}
     </li>
</ul>
share|improve this answer
    
This didn't work but rather results in a different rendering issue with duplicating results twice (I updated my test page.. –  Joe Conlin Dec 8 '13 at 18:39
    
@Joe Conlin: I don't know what you expect when you use ng-repeat="formattedResult in data.formattedResults". Because data.formattedResults is an OBJECT, by using in, you're iterating all object PROPERTIES (ruleResults, and locale). That's why it's duplicated twice. Check my answer, I did not have ng-repeat="formattedResult in data.formattedResults" in <ul> –  Khanh TO Dec 9 '13 at 12:47
    
You are correct, I missed that. Your answer worked perfectly. Thanks! –  Joe Conlin Dec 9 '13 at 17:47

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.