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:

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.

What is the point of using angular.forEach? What exactly are you trying to do? — Tuğca Eker
– Tuğca Eker, Commented Aug 29, 2017 at 13:23
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. — Steingrrim
– Steingrrim, Commented Aug 30, 2017 at 10:19

devqon · Accepted Answer · 2017-08-29 13:32:41Z

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>

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

Olezt · Accepted Answer · 2017-08-29 13:43:16Z

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;
    });
};

Collectives™ on Stack Overflow

Render JSON data to html table Angularjs

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related