无法使用角度js从json数据中获取纯文本(表格)数据

时间:2016-12-31 13:35:20

标签: javascript jquery angularjs json

我想将json数据显示到表中,但它显示的结果如下所示。如何以角度js显示表中的json数据。

userid  {{x.userid}}
status  {{x.status}} 

期望的输出:

userid 0000acfffe731122
status 3

Json数据:

{  
   "userid":"0000acfffe731122",
   "status":3
}

<table>
    <tr>
        <td>
            device id
        </td>
        <td>
            {{names.userid}}
        </td>
    </tr>
    <tr>
        <td>
            device status
        </td>
        <td>{{names.status}}</td>
    </tr>
</table>

<script>
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('https://example.com/abc', {
headers: { 'Authorization': 'Basic a2VybmVsc==' }
})
.then(function(response) {
    $scope.names = response.data;
});
});
</script>

1 个答案:

答案 0 :(得分:1)

如果您必须使用names,则ng-repeat对象必须是数组,因为它就是这样的:

[{
  "userid": "0000acfffe731122",
  "status": 3
}];

见下面的演示:

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  $scope.names = [{
    "userid": "0000acfffe731122",
    "status": 3
  }];

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr ng-repeat="x in names">
    <td>user id -</td>
    <td>{{x.userid}}</td>
  </tr>
  <tr ng-repeat="x in names">
    <td>status -</td>
    <td>{{x.status}}</td>
  </tr>
</table>
&#13;
&#13;
&#13;

如果无法成为数组,您可以使用names.useridnames.status - 请参阅下面的演示:

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  $scope.names = {
    "userid": "0000acfffe731122",
    "status": 3
  };

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
  <tr>
    <td>user id -</td>
    <td>{{names.userid}}</td>
  </tr>
  <tr>
    <td>status -</td>
    <td>{{names.status}}</td>
  </tr>
</table>
&#13;
&#13;
&#13;