CODEWITHSUNDEEP
javascriptangularjs
GibboK
GibboK

Reputation: 73908

Cannot display data in a VIew

I cannot display data in the view. I see the result of ajax load on results.data, but I am not able to display the result.

The JSON data is-

[{
    "locationId": 14,
    "name": "coin"
},
{
    "locationId": 11,
    "name": "coop"
},
{
    "locationId": 5,
    "name": "dxd"
},
{
    "locationId": 15,
    "name": "dxd2"
},
{
    "locationId": 1017,
    "name": "inka"
},
{
    "locationId": 16,
    "name": "test-pinco"
},
{
    "locationId": 13,
    "name": "upimuim"
}]

View

<div class="row">
    <div class="col-md-2">
        &nbsp;
    </div>
    <div class="col-md-8">
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>LocationId</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="order in orders">
                    <td>
                        {{ locationId }}
                    </td>
                    <td>
                        {{ name }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-2">
        &nbsp;
    </div>
</div>

Controller

'use strict';
app.controller('locationsController', ['$scope', 'locationsService', function ($scope, locationsService) {

    $scope.locations = [];

    locationsService.getLocations().then(function (results) {

        $scope.locations = results.data;

    }, function (error) {
        //alert(error.data.message);
    });

}]);

Service

'use strict';
app.factory('locationsService', ['$http', function ($http) {

    var serviceBase = 'http://localhost:4014/';
    var locationsServiceFactory = {};

    var _getLocations = function () {

        return $http.get(serviceBase + 'api/locations').then(function (results) {
            return results;
        });
    };

    locationsServiceFactory.getLocations = _getLocations;

    return locationsServiceFactory;

}]);

Upvotes: 0

Views: 50

Answers (3)

micronyks
micronyks

Reputation: 55443

Try this in view-

replace your $scope.locations to $scope.orders and then use order.locationID and order.name.

Upvotes: 1

Vidhya Sagar Reddy
Vidhya Sagar Reddy

Reputation: 1631

The following should work: the location Id and name are properties of order object. Hence, to access them, we need to access this way: order.locationId, order.Name

    <div class="row">
        <div class="col-md-2">
            &nbsp;
        </div>
        <div class="col-md-8">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>LocationId</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="order in orders">
                        <td>
                            {{ order.locationId }}
                        </td>
                        <td>
                            {{ order.name }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-2">
            &nbsp;
        </div>
    </div>

Upvotes: 1

Michael Kang
Michael Kang

Reputation: 52837

Your service should return a promise:

app.factory('locationsService', ['$http', function ($http) {

    var serviceBase = 'http://localhost:4014/';
    var locationsServiceFactory = {};

    var _getLocations = function () {

        // return a promise
        return $http.get(serviceBase + 'api/locations');
    };

    locationsServiceFactory.getLocations = _getLocations;

    return locationsServiceFactory;

}]);

And your view should reference order inside an ng-repeat:

<tr data-ng-repeat="order in orders">
    <td>
        {{ order.locationId }}
    </td>
    <td>
        {{ order.name }}
    </td>
</tr>

Upvotes: 1

Related Questions