CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
pankaj
pankaj

Reputation: 1060

Unable to render Jsonresult on view AngularJS

I am trying to render a json result from my angular controller in a view. But i am failing to do so. i need to show list of names present in the service. if i write like {{menu[0].name}} i get one result but i need to show a list of names

html

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

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

below is my controller code:

         (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]);

}());

From service i am getting data like this

            (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]);

}());

i feel i am doing something wrong on js side. I am trying to access the array by menu.name but controller data is an object which has array.

JSON result which i have on controller side

               {"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":"&lt;p&gt;\r\n\tExample of category description text&lt;\/p&gt;\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 &amp; Notebooks","description":"&lt;p&gt;\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.&lt;\/p&gt;\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 &amp; 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":"&lt;p&gt;\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.&lt;\/p&gt;\r\n","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"}]}

My problem is i am not able to render list of names using {{menu.names}} on view. What i need to do to get the list of names on view?

Upvotes: 0

Views: 93

Answers (3)

cnorthfield
cnorthfield

Reputation: 3501

Your code is not easily readable.

I suggest you return the promise from your service to your controller and then resolve it like so:

// 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 

});

Upvotes: 1

Sayed
Sayed

Reputation: 631

I believe the issue is with this line: employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);

You can update your service as below:

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

And then access the promise's get method in your controller:

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

Upvotes: 0

JuanB
JuanB

Reputation: 180

If you want iterate over objects in angular js you have to do the following statement:

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

Try that, I have seen that URL retrieve json object in first moment then I think can works.

comment the results !

Upvotes: 0

Related Questions