将JSON数据呈现给html表Angularjs。

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:

我的get方法使用要在表中呈现的JSON数据进行响应。这是我控制台时的输出。日志变量声明我的get方法:

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.

我似乎无法引用正确的对象来获得我想要的信息。Bellow是我想要呈现数据的表。{{searchValue}}返回表单元格中的整个对象。我还需要一个ng-repeat，因为可以有多个对象。

     <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.

我已经更新了表，但是没有数据是我在表中呈现的对象数据。我不认为obj。GTIN是引用json对象中的数据的正确方法。带有承诺的解决方案在控制器中不起作用。

------------------------------------------------------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.

控制台日志打印出未定义的对象变量。我也尝试过JSON.parse()，但运气不佳。响应。对于有效的搜索文本，长度为1或更多。

2 个解决方案

#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:

我想你的产品。searchPakninge返回一个html承诺，所以你必须使用。然后，您可以将结果分配给一个变量，并使用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>

#2

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

既然你在一个单元格中获取数据，我假设searchPakninger不会返回一个承诺，所以这应该足够了:

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

#1