Render JSON data to html table Angularjs

Question

My get method is responding with JSON data that i want to render in a table. This is the output when i console.log the variable declared i my get-method:

JSON data console output

This is my controller method:

 $scope.getProdukt = function (searchText, typeVariable) {
 var results = produktService.searchPakninger(searchText, typeVariable);
 angular.forEach(results,
 function (value, key) {
 console.log(key);
 console.log(value);
 console.log(value.status.status + ' her er status.status');
 $scope.searchValue = value; 
 });
 };

I can't seem to reference the object correctley to get the info i want. Bellow is the table I would like to render the data in. {{searchValue}} returns the entire object in one table cell. I also need an ng-repeat since there can be more than one object.

 <table class="table" id="mixTables">
 <thead>
 <tr>
 <th>GTIN</th>
 <th>EPDNR</th>
 <th>NAVN</th>
 <th>Handling</th>
 </tr>
 </thead>
 <tbody ng-if="!searchEmpty">
 <tr ng-repeat="obj in searchValue">
 <td>GTIN: nummer: {{obj.GTIN}}</td>
 <td>Kategori navn: {{obj.KategoriNavn}}</td>
 <td>Kategori kode: {{obj.KategoriKode}}</td>
 <td><button class="btn btn-green pull-right" type="button" ng-click="addProdukt()">Velg <span class="fa fa-plus-circle"></span></button></td>
 </tr>
 </tbody>
 </table>

I have updated my table, but no data is obj-data i rendered in the table. I dont think obj.GTIN is the right way to reference the data in the json object. The solutions with promises did not work in the controller.

------------------------------------------------------UPDATE------------------------------------------------------------------

I am also trying with a promise in the controller. Here is what i have so far:

$scope.getProdukt = function (searchText, typeVariable) {
 var results2 = produktService.searchPakninger(searchText, typeVariable)
 .then(function (response) {
 var object = JSON.stringify(this.response); 
 //$scope.searchValue = response.data;
 //$scope.isEmpty = false;
 console.log('async promise = ' + object); 
 });
}

The console log prints out undefined for the object variable. I have been trying JSON.parse() as well, but with no luck. response.length is 1 or more for valid searchText.

• Tuğca Eker: What is the point of using angular.forEach? What exactly are you trying to do?
• Steingrrim: the forEach is to iterate through all the results recieved from the API. I am trying to assign different values in each cell in the table.

Answer 1

I assume that your produktService.searchPakninge returns a html promise, so you have to use the .then function. You can then assign the results to a variable, and loop through them with ng-repeat:

$scope.getProdukt = function (searchText, typeVariable) {
 produktService.searchPakninger(searchText, typeVariable)
 .then(function(response) {
 $scope.result = response.data;
 });
};

And the view:

<tbody>
 <tr ng-repeat="item in result">
 <td>{{item.GTIN}}</td>
 <td>{{item.Egenskaper}}</td>
 <td>{{item.Markedsnavn}}</td>
 <td><button class="btn btn-green pull-right" type="button">Velg <span class="fa fa-plus-circle"></span></button></td>
 </tr>
</tbody>

• Steingrrim: I used data instead of response in the function parameter, otherwise this solved my issue

Answer 2

Since you get your data in one cell I assume searchPakninger does not return a promise, so this should be enough:

<tbody>
 <tr ng-repeat="obj in searchValue">
 <td>{{obj.GTIN}}</td>
 <td>{{obj.Egenskaper}}</td>
 <td>{{obj.Markedsnavn}}</td>
 <td>{{obj.KategoriNavn}}</td>
 <td>{{obj.KategoriKode}}</td>
 <td><button class="btn btn-green pull-right" type="button">Velg <span class="fa fa-plus-circle"></span></button></td>
 </tr>
</tbody>

In case it returns a promise though, you should also transform your function as:

$scope.getProdukt = function (searchText, typeVariable) {
 produktService.searchPakninger(searchText, typeVariable)
 .then(function(response) {
 $scope.result = response.data;
 });
};