Json响应angularjs无法正常工作

Question

I am new to angularjs and for some reason the angularjs does not load any data on the page when json is from joomla component.

Angularjs works when I get the data from getcustomers.php file which is in the root of the site but does not when the json data is coming from a joomla component. (http://localhost/testsite/index.php?option=com_helloworld&view=helloworld&format=raw).

I can see that the json is loading ( Did hit the url directly for both getcustomers.php and joomla component can also see in the chrome developer tools when the page loads).

The only difference in both the json responses, I can see is the double brackets [{"Id":87,"EANHotelID": }](working Json example) while the not working json example is [[{"Id":87,"EANHotelID":}]].

Angularjs controller is below:(the only difference between working and not working is the HTTP.GET below:

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
    $http.get('testsite/index.php?option=com_helloworld&view=helloworld&format=raw').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 10; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

Hope you can help.

Answer 1

A couple of things:

1. The JSON being fetched is invalid. You should assign a value to the "EANHotelID" property such as null if no value is present. It would look like this:

   [{"Id":87,"EANHotelID": null}]

2. The second response that doesn't work is an array with an array inside of it. To access the data like you are doing you would have to change the first line in your $http.get success function from:

$scope.list = data;

to

$scope.list = data[0];

It would be better to send the response without the extra array wrapper since you don't need it.