CODEWITHSUNDEEP
javascriptangularjs
Taylor Gagne
Taylor Gagne

Reputation: 393

AngularJS ng-repeat not displaying data

I have an array inside of my controller that I'm tried to iterate into a table inside of my view template. Inside of the console, I can see the array objects but inside my table, I only see the rows without the data being displayed.

HTML Template:

<div class="availability-list-table" ng-controller="InventoryController">
<table class="table availability-table">
    <tbody>
    <tr ng-repeat="item in items">
        <td>{{items.qty}}</td>
        <td>{{items.item}}</td>
    </tr>
    </tbody>
</table>

Controller:

    app.controller('InventoryController', ['$scope', function($scope) {

    $scope.items = [
        {
            item: 'Blue Moon Pint',
            qty: 50,
        },
        {
            item: 'Bud Light Pint',
            qty: 50,
        },
        {
            item: 'Sprite',
            qty: 30,
        },
        {
            item: 'Coke',
            qty: 100
        }
    ];
}]);

How the table looks:

How table looks:

This is what I can see inside of the console:

This is what I can see inside of the console

Upvotes: 0

Views: 99

Answers (1)

The fourth bird
The fourth bird

Reputation: 163362

You are looping through items: item in items.

Try item.qty and item.item instead:

<div class="availability-list-table" ng-controller="InventoryController">
<table class="table availability-table">
    <tbody>
    <tr ng-repeat="item in items">
        <td>{{item.qty}}</td>
        <td>{{item.item}}</td>
    </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions