Explore our sites

Stack Exchange
tour help
Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 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
add comment

2 Answers

up vote 0 down vote

You need to wrap you promises with $apply statements

In the Example you can see that when things are done out outside of the normal angular lifecycle, for example in promise delegates calling apply will allow the view to update properly.

function () {
    $scope.$apply(function () {
        ... some work ...
    });
}
share|improve this answer
add comment
up vote 0 down vote

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 10 hours ago
add comment

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.