無法呈現JsonResult的視圖AngularJS

Question

我想呈現從我的角度控制器在視圖中的json結果。但我沒有這樣做。我需要顯示服務中的名稱列表。如果我寫這樣{{菜單中的[0]。名稱}}，我得到一個結果，但我需要顯示的名字

HTML列表

 <table> 
     <tr ng-repeat="menu in MenuAnshu"> 
     <td> 

     {{menu.name}} 
    < /td> 
</tr> 

下面

是我的控制器代碼：

  (function() { 
var EmployeesController = function ($scope, employeeService, $log) { 
    var employees = function (data) { 
     $scope.Employees = data; 

    }; 

    var MenuAnshuData = function (data) { 
     $scope.MenuAnshu = data; 
     console.log(data) 
    }; 

    var errorDetails = function (serviceResp) { 
     $scope.Error = "Something went wrong ??"; 
    }; 
    employeeService.employees().then(employees, errorDetails); 
    employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails); 
    $scope.Title = "Employee Details Page"; 
    $scope.EmployeeName = null; 
}; 

app.controller("EmployeesController", ["$scope", "employeeService", "$log", EmployeesController]); 

}（））;

從服務我很喜歡這個

  (function() { 
var employeeService = function ($http) { 
    var employees = function() { 
     return $http.get("http://localhost:63352/api/ptemployees") 
        .then(function (serviceResp) { 
         return serviceResp.data; 
        }); 
    }; 

    var MenuAnshuData = function() { 
     return $http.get("http://redshaft.in/ocapi/index.php?route=api/order/getcategories").then(function (serviceResp) { 
      return serviceResp.data; 
     }); 


    }; 
    return { 
     employees: employees,   
     MenuAnshuData: MenuAnshuData 

    }; 
}; 

var module = angular.module("ProjectTrackingModule"); 
module.factory("employeeService", ['$http', employeeService]); 

}（））獲取數據;

我覺得我在js方面做錯了什麼。我想通過menu.name來訪問數組，但控制器數據是一個有數組的對象。

JSON結果，我對控制器側

   {"categories":[{"category_id":"20","image":"catalog\/demo\/compaq_presario.jpg","parent_id":"0","top":"1","column":"1","sort_order":"1","status":"1","date_added":"2009-01-05 21:49:43","date_modified":"2011-07-16 02:14:42","language_id":"1","name":"Desktops","description":"<p>\r\n\tExample of category description text<\/p>\r\n","meta_title":"","meta_description":"Example of category description","meta_keyword":"","store_id":"0"},{"category_id":"18","image":"catalog\/demo\/hp_2.jpg","parent_id":"0","top":"1","column":"0","sort_order":"2","status":"1","date_added":"2009-01-05 21:49:15","date_modified":"2011-05-30 12:13:55","language_id":"1","name":"Laptops & Notebooks","description":"<p>\r\n\tShop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals. From refurbished laptops to netbooks, Shop Laptop ensures that every laptop - in every colour, style, size and technical spec - is featured on the site at the lowest possible price.<\/p>\r\n","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"25","image":"","parent_id":"0","top":"1","column":"1","sort_order":"3","status":"1","date_added":"2009-01-31 01:04:25","date_modified":"2011-05-30 12:14:55","language_id":"1","name":"Components","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"57","image":"","parent_id":"0","top":"1","column":"1","sort_order":"3","status":"1","date_added":"2011-04-26 08:53:16","date_modified":"2011-05-30 12:15:05","language_id":"1","name":"Tablets","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"17","image":"","parent_id":"0","top":"1","column":"1","sort_order":"4","status":"1","date_added":"2009-01-03 21:08:57","date_modified":"2011-05-30 12:15:11","language_id":"1","name":"Software","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"24","image":"","parent_id":"0","top":"1","column":"1","sort_order":"5","status":"1","date_added":"2009-01-20 02:36:26","date_modified":"2011-05-30 12:15:18","language_id":"1","name":"Phones & PDAs","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"33","image":"","parent_id":"0","top":"1","column":"1","sort_order":"6","status":"1","date_added":"2009-02-03 14:17:55","date_modified":"2011-05-30 12:15:25","language_id":"1","name":"Cameras","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"34","image":"catalog\/demo\/ipod_touch_4.jpg","parent_id":"0","top":"1","column":"4","sort_order":"7","status":"1","date_added":"2009-02-03 14:18:11","date_modified":"2011-05-30 12:15:31","language_id":"1","name":"MP3 Players","description":"<p>\r\n\tShop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals. From refurbished laptops to netbooks, Shop Laptop ensures that every laptop - in every colour, style, size and technical spec - is featured on the site at the lowest possible price.<\/p>\r\n","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"}]} 

我的問題是我不能夠呈現使用{{menu.names}}在視圖名稱列表。我需要做什麼才能獲得視圖中的名稱列表？

Answer 1

您的代碼不易讀。

我建議你從你的服務回報承諾，您的控制器，然後解決它像這樣：

// service 
// return the promise of the GET request 
var MenuAnshuData = function() { 
    return $http.get("http://redshaft.in/ocapi/index.php?route=api/order/getcategories"); 
}; 

// controller 
// make the call to MenuAnshuData from your service 
employeeService.MenuAnshuData().then(function(response) { 

    // log the data so you can inspect what you have 
    console.log(response.data) 

    // pouplate MenuAnshu with the response 
    $scope.MenuAnshu = data; 

}, function(error) { 

    // handle any failed response 

}); 

Answer 2

如果你想遍歷的角度JS對象，你必須做如下聲明：

Ng-repeat="(key,value) in object" 

試試看，我已經看到該URL在第一時間檢索json對象，然後我認爲可以工作。

評論結果！

Answer 3

我相信這個問題是這一行： employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);

您可以更新您的服務如下：

var MenuAnshuData = function() { 
    var config = {method: 'GET', url:"http://redshaft.in/ocapi/index.php?route=api/order/getcategories"} 
    return $http(config); 
}; 

，然後訪問承諾的get方法在你的控制器：

employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);