使用 Angular 5 中的标头解析远程 JSON 文件答案

【问题标题】：Parse a remote JSON file using header in Angular 5使用 Angular 5 中的标头解析远程 JSON 文件
【发布时间】：2018-03-12 17:11:02
【问题描述】：

我需要在 Angular 5 中使用带有 get 请求的标头来解析远程 JSON 文件。不确定如何使用 GET 和 header。

类似的东西，但在 Angular 5 中：

let headers = new Headers({
  'key': 'Value',
  'key2' :'value2'
});
let request_option = new RequestOptions({ headers: this.headers});
this.http.get("http.//.....", request_option)
.map(res => res.json()

this.user.firstname = user.response.docs[0].FIRST_NAME;
this.user.lastname = user.response.docs[0].LAST_NAME;

JSON：

{
    "responseHeader": {
      "status":0,
        "QTime":1,
    },"response":{
    "docs":[{
            "FIRST_NAME": "John",
            "LAST_NAME": "Smith"
}]          
    }
  }

&终于可以用HTML调用它了：

<div>{{user.firstname}}</div>

【问题讨论】：

你使用的是 AngularJS 而不是 Angular
我不知道您要归档什么，但我看不到 parJson 函数，也看不到您的 json 对应于用户列表。

标签： html json angular angular5

【解决方案1】：

下面是从另一个服务器获取json的例子

$scope.userData = undefined;
        var req = {
            method: 'GET',
            url: 'https://randomuser.me/api/?results=30&nat=US',
            headers: { 'Content-Type': 'application/json' }
        };

        $http(req).then(function (response) {
            $scope.userData = response.data;
        });

如果 response.data 是以 json 字符串形式接收的，您可以使用以下代码轻松解析它

JSON.stringify(response.data)

以下是从另一台服务器获取 json 并将其显示在表格中的工作示例

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.userData = undefined;
        var req = {
            method: 'GET',
            url: 'https://randomuser.me/api/?results=30&nat=US',
            headers: { 'Content-Type': 'application/json' }
        };

        $http(req).then(function (response) {
            $scope.userData = response.data;
        });
      }]);


    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <form name="commonForm">
      <table class="table">
        <tr>
          <th> Name </th>
          <th> Gender </th>
          <th> Email </th>
          <th> Username </th>
          <th> Date of Birth </th>
          <th> Registered Date </th>
          <th> Phone </th>
          <th> Mobile </th>
          <th> Nationality </th>
          <th> Profile </th>
        </tr>
        <tr ng-repeat="user in userData.results">
          <td> {{user.name.first}} {{user.name.last}}</td>
          <td> {{user.gender}}</td>
          <td> {{user.email}}</td>
          <td> {{user.login.username}}</td>
          <td> {{user.dob}}</td>
          <td> {{user.registered}}</td>
          <td> {{user.phone}}</td>
          <td> {{user.cell}}</td>
          <td> {{user.nat}}</td>
          <td> 
            <img ng-src="user.picture.large">
          </td>
        </tr>
      </table>

    </form>

  </div>
</body>

</html>

【讨论】：

您的答案适用于angularjs，但 OP 要求提供angular 5。

【解决方案2】：

在 Angular 5 中，您可以在测试用例中使用属性绑定来访问 DOM 元素的属性：

<div [innerHTML]="post.body"></div>

参考这里angular.io docs

【讨论】：