Using ng-repeat to Process JSON response from the server Ajax calls

In the previous posts we saw on how to use the ng-repeat directive to handle 1-dimentional arrays and arrays of objects.

ng-repeat directive
Using ng-repeat to process an array of objects

In this post we shall see a more real time scenario of using ng-repeat directive to process JSON data which is received from a server side API call. The following example does an API call using the $http services to get a JSON response containing a list of report details, the view iterates through the reports in the JSON and displays the report id and name in the HTML view

Ajax call

$http.get(…)
            .then(function (results) {
                //Success;
                try {
                    scope. reports = results.data;
                }
                catch (err) {
                    alert(err.message);
                }
            }, function (results) {
                //error
                alert("Error: " + results.data + "; "
                                      + results.status);
            }

)

UI to Process JSON
<ul ng-repeat="report in reports">
    <li>{{report.Name}} - {{report.Name}}</li>
</ul>