使用AngularJS打印JSON值

时间:2016-06-27 23:50:55

标签: javascript angularjs json

我正在尝试使用AngularJS从JSON端点打印一些数据。 结束点: - http://localhost:8081/api

JSON结构: -

{
  "1": {
    "venture": "XYZ Informatics",
    "member": [
      {
        "name": "abcd",
        "email": "abcd@gmail.com"
      }
    ],
    "message": "This is good day",
    "isclicked": false
  },
  "2": {
    "venture": "BBC Informatics",
    "member": [
      {
        "name": "xyz",
        "email": "xyz@gmail.com"
      }
    ],
    "message": "This is bad day",
    "isclicked": false
  }
}

我想在行中显示风险投资的名称。我在行中的预期输出是: -

XYZ Informatics
BBC Informatics

我的代码是: -

    <!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
      th, td {
      padding: 15px;
      }
    </style>
  </head>
  <body>
    <div ng-app="MyApp" ng-controller="displayController">
      <table style="width:100%">
        <tr ng-repeat="data in datas">
          <td>{{ data.venture }}</td>
        </tr>
      </table>
    </div>
    <script>
      angular.module('MyApp', [])
      .controller('displayController', function($scope, $http) {
      var url = "http://localhost:8081/api";
      $http.get(url).success(function (response) {
      $scope.datas = response;
      });
      }
    </script>
  </body>
</html>

但是价值没有显示。可能,我很想进入每个JSON数组。

1 个答案:

答案 0 :(得分:5)

您的脚本存在语法错误。关闭控制器的支架。

  <script>
    angular.module('MyApp', [])
      .controller('displayController', function($scope, $http) {
        //changed to your local api
         var url = "http://localhost:8081/api";
        $http.get(url).success(function(response) {
          $scope.datas = response;
        });
      });//this is the place where you miss out the closing bracket
  </script>

这是工作plnkr