2015-02-19 02:23 阅读 37


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) {
        $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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    dongpu7881 dongpu7881 2015-02-19 02:42

    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;


    $scope.list = data[0];

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

    点赞 评论 复制链接分享