Passing Json data from Controller to View in Angular JS to build a table

Question

Trying to get the certain fields to display, ideally in a table (headings, rows & columns). And looking for a best way find fields in a Json feed. I tried using the controller to find the fields then pass that data to the view in the HTML.

Is there something wrong in the controller with respect to the Json? the fields are empty. Seems like nothing is passed from the controller to the view ? This is what I tried:

<!doctype html>
<html ng-app="app" >
<head>
    <meta charset="utf-8">
    <title>LIVE</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script>
        var app = angular.module('app', []);

app.controller('DataCtrl', function ($scope, $http) {

 $scope.result = {
                  "data": {
                    "transactionList": [{
                      "barcode": "52905819992681",
                      "training": 0,
                      "tranNo": 1,
                      "userId": "8796093054980",
                      "retailerId": "defaultRetailer",
                      "storeId": "12Store",
                      "deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
                      "tillId": "2",
                      "tranTypeId": "regularSale",
                      "isTranVoid": 0,
                      "totalItems": 1,
                      "merchTotal": 50.0,
                      "promoTotal": 0.0
                    }, {
                      "barcode": "52905819592681",
                      "training": 0,
                      "tranNo": 1,
                      "userId": "8796093054980",
                      "retailerId": "defaultRetailer",
                      "storeId": "23Store",
                      "deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
                      "tillId": "2",
                      "tranTypeId": "regularSale",
                      "isTranVoid": 0,
                      "totalItems": 1,
                      "merchTotal": 50.0,
                      "promoTotal": 0.0
                    }]
                  }
                }

};

$scope.elements = $scope.result.data.transactionList.map(function (res) {
  var e = {};
  e.transTypeId = res.transTypeId;
  e.userId = res.userId;
  e.storeId = res.storeId;
  return e;
});

});

    </script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from the JSON feed</h1>
<ul>
    <li ng-repeat="e in elements">
        {{ e.transTypeId}}: {{ e.userId }}, {{ e.storeId }}
    </li>
</ul>
</body>
</html>

Subash · Accepted Answer · 2016-01-20 22:51:32Z

You have a extra } in your $scope.result. It should be like:

$scope.result = {
                  "data": {
                    "transactionList": [{
                      "barcode": "52905819992681",
                      "training": 0,
                      "tranNo": 1,
                      "userId": "8796093054980",
                      "retailerId": "defaultRetailer",
                      "storeId": "12Store",
                      "deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
                      "tillId": "2",
                      "tranTypeId": "regularSale",
                      "isTranVoid": 0,
                      "totalItems": 1,
                      "merchTotal": 50.0,
                      "promoTotal": 0.0
                    }, {
                      "barcode": "52905819592681",
                      "training": 0,
                      "tranNo": 1,
                      "userId": "8796093054980",
                      "retailerId": "defaultRetailer",
                      "storeId": "23Store",
                      "deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
                      "tillId": "2",
                      "tranTypeId": "regularSale",
                      "isTranVoid": 0,
                      "totalItems": 1,
                      "merchTotal": 50.0,
                      "promoTotal": 0.0
                    }]
                  }
                };

// get rid of this};

Here is working plunkr

koster1889 · Accepted Answer · 2016-01-20 22:26:08Z

1

Perhaps a }; too many?

Automatic indentation usually makes those kinds of errors apparent.

answered Jan 20, 2016 at 22:26

koster1889

1267 bronze badges

1 Comment

windsurf88 Over a year ago

Thanks -- was getting lost with the }; and the }

score 0 · Accepted Answer · 2016-01-20 22:39:23Z

0

Have you tried to use ng-model="...", it gives you the opportunity to overwrite an attribute or to show it. You can try it with

<input type="number" ng-model="someID" disabled="disabled">

*disabled if u need readOnly on that field. and see how it works, maybe it can help you out. regards

edited Jan 20, 2016 at 22:39

answered Jan 20, 2016 at 22:31

user5762337

Comments

Mariusz · Accepted Answer · 2020-06-01 14:10:20Z

0

I may be wrong, but you are trying to read json data directly without parsing it?
MDN JSON.parse()

Also it would be nice if you upload your code on something like http://jsfiddle.net This way people can test it out.

edited Jun 1, 2020 at 14:10

answered Jan 20, 2016 at 22:21

Mariusz

3611 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Passing Json data from Controller to View in Angular JS to build a table

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related