API JSON response using ng-repeat in AngularJS

Question

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!

Khanh TO · Accepted Answer · 2013-12-08 04:47:21Z

1

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>

edited Dec 8, 2013 at 4:47

answered Dec 8, 2013 at 4:40

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

3 Comments

Joe Conlin Over a year ago

This didn't work but rather results in a different rendering issue with duplicating results twice (I updated my test page..

Khanh TO Over a year ago

@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>

Joe Conlin Over a year ago

You are correct, I missed that. Your answer worked perfectly. Thanks!

Collectives™ on Stack Overflow

API JSON response using ng-repeat in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related