Question

我是角度JS的新手。

我正在尝试显示来自JSON API响应的数据。 HTML不显示API中的数据。感谢您的帮助。

以下是API响应。

{
"Error": false,
"Message": "Success",
"sensors": [
{
  "SENSOR_ID": 1,
  "SENSOR_NAME": "Hygro meter 1",
  "SENSOR_TYPE": "soil humidity sensor"
},
{
  "SENSOR_ID": 2,
  "SENSOR_NAME": "Hygro meter 2",
  "SENSOR_TYPE": "soil humidity sensor"
},
{
  "SENSOR_ID": 3,
  "SENSOR_NAME": "Hygro meter 3",
  "SENSOR_TYPE": "soil humidity sensor"
}

]
}

以下是HTML部分。

你能帮忙吗？

<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;

}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>


<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr>
<th>Sensor ID</th>
<th>Sensor Name</th>
<th>Sensor Type</th>
</tr>

<tr ng-repeat="x in names">
<td>{{ x.SENSOR_ID }}</td>
<td>{{ x.SENSOR_NAME }}</td>
<td>{{ x.SENSOR_TYPE }}</td>

</tr>
</table>
</div>


<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

$http.get("http://54.244.108.186:4000/api/sensors")
.then(function (response)

{$scope.names = response.data.sensors;});

});


</script>

<script    
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">                
</script>
</body>
</html>

以下是JSON响应：

enter image description here

Answer 1

试试这个有用的演示：

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('customersCtrl', function($scope,$http) {
  $scope.names = [
{
  "SENSOR_ID": 1,
  "SENSOR_NAME": "Hygro meter 1",
  "SENSOR_TYPE": "soil humidity sensor"
},
{
  "SENSOR_ID": 2,
  "SENSOR_NAME": "Hygro meter 2",
  "SENSOR_TYPE": "soil humidity sensor"
},
{
  "SENSOR_ID": 3,
  "SENSOR_NAME": "Hygro meter 3",
  "SENSOR_TYPE": "soil humidity sensor"
}
];

$scope.column = Object.keys($scope.names[0]);

});

＆＃13;

table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr>
<th ng-repeat="item in column">{{item}}</th>
</tr>
<tr ng-repeat="x in names">
<td ng-repeat="item in column">{{ x[item] }}</td>
</tr>
</table>
</div>

＆＃13;

Answer 2

只需检查您的回复，看看是否需要转换：

<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;

}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>


<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
<tr>
<th>Sensor ID</th>
<th>Sensor Name</th>
<th>Sensor Type</th>
</tr>

<tr ng-repeat="x in names">
<td>{{ x.name }}</td>
<td>{{ x.key }}</td>
<td>{{ x.url }}</td>

</tr>
</table>
</div>

<script    
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">                
</script>
  
  <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

  $http.get("https://api.mixcloud.com/spartacus/party-time/")
  .then(function (response) {
    
      $scope.names = response.data.tags;
    });

});


</script>
  
</body>
</html>

顺便说一下，你必须将角度脚本标记移动到Angular引用下面，因为它需要它来创建应用程序。

使用angular js在HTML中显示JSON API响应

2 个答案: