在JavaScript / Angular中映射從Http請求返回的JSON API對象

Question

我是第一次使用Http請求返回的JSON API。 我通常使用JSON，但是通常不使用ID引用，而是通常具有同一節點中所需的所有信息。

這些JSON不同，返回的對象僅具有data數組（在以下示例中）。 因此，如果我想在同一頁面上顯示有關患者的更多信息，則它們並不完整。 為了獲得所有患者信息，在我的Ajax請求中，我必須在URL的末尾添加參數/visits?include=client 。

在以下示例中，JSON基本包含一些護理人員訪問。 每次訪問具有對應到在在返回的ID自己的客戶端ID included與它自己的地址ID，我最終可以通過添加另一個參數添加到URL檢索陣列，並且是在返回included陣列也是如此。

示例響應如下所示：

{
   "data":[
      {
         "id":"27",
         "type":"visit",
         "attributes":{
            "address-id":"82",
            "client-id":"26",
            "care-service-id":"2",
            "carer-id":"",
            "care-service":"Domiciliary care",
            "brief":null,
            "starts-at":"2017-03-03T12:12:00+00:00",
            "ends-at":"2017-03-03T14:14:00+00:00",
            "checked-in-at":null,
            "checked-out-at":null,
            "checkout-notes":null,
            "state":"unallocated",
            "care-plan-summary":"",
            "pay-rate":12.0,
            "pay-rate-currency":"GBP"
         },
         "relationships":{
            "address":{
               "data":{
                  "id":"82",
                  "type":"address"
               }
            },
            "client":{
               "data":{
                  "id":"26",
                  "type":"client"
               }
            }
         }
      },
      {
         "id":"28",
         "type":"visit",
         "attributes":{
            "address-id":"112",
            "client-id":"46",
            "care-service-id":"2",
            "carer-id":"",
            "care-service":"Domiciliary care",
            "brief":null,
            "starts-at":"2017-03-04T12:12:00+00:00",
            "ends-at":"2017-03-04T14:14:00+00:00",
            "checked-in-at":null,
            "checked-out-at":null,
            "checkout-notes":null,
            "state":"unallocated",
            "care-plan-summary":"",
            "pay-rate":14.0,
            "pay-rate-currency":"GBP"
         },
         "relationships":{
            "address":{
               "data":{
                  "id":"112",
                  "type":"address"
               }
            },
            "client":{
               "data":{
                  "id":"46",
                  "type":"client"
               }
            }
         }
      },
      ... etc ...

   ],
   "included":[
      {
         "id":"26",
         "type":"client",
         "attributes":{
            "title":"Ms",
            "first-name":"Jessica",
            "middle-name":null,
            "last-name":"Rabbit",
            "preferred-name":null,
            "primary-phone":"555-909-9555",
            "secondary-phone":null,
            "email":"jessica.rabbit@example.com",
            "date-of-birth":"1985-10-14",
            "marital-status":"Single",
            "gender":"Female",
            "nationality":"British",
            "ethnicity":"Human",
            "religion":"N/A",
            "care-plan-summary":null,
            "photo-url":"/images/client_26.png",
            "allergies":[

            ],
            "care-requirements":[
               "Domiciliary care"
            ],
            "medical-conditions":[

            ],
            "interests":[

            ],
            "pets":[

            ],
            "skill-requirements":[

            ]
         },
         "relationships":{
            "addresses":{
               "data":[
                  {
                     "id":"82",
                     "type":"address"
                  }
               ]
            }
         }
      },
      {
         "id":"46",
         "type":"client",
         "attributes":{
            "title":"Mr",
            "first-name":"Donald",
            "middle-name":null,
            "last-name":"Duck",
            "preferred-name":null,
            "primary-phone":"555-779-1875",
            "secondary-phone":null,
            "email":"donald.duck@example.com",
            "date-of-birth":"1955-10-14",
            "marital-status":"Single",
            "gender":"Male",
            "nationality":"British",
            "ethnicity":"Duck",
            "religion":"N/A",
            "care-plan-summary":null,
            "photo-url":"/images/client_46.png",
            "allergies":[

            ],
            "care-requirements":[
               "Domiciliary care"
            ],
            "medical-conditions":[

            ],
            "interests":[

            ],
            "pets":[

            ],
            "skill-requirements":[

            ]
         },
         "relationships":{
            "addresses":{
               "data":[
                  {
                     "id":"112",
                     "type":"address"
                  }
               ]
            }
         }
      },
      ... etc ...

   ],
   "links":{

   },
   "meta":{
      "page-size":10,
      "page-number":1,
      "total-pages":1
   }
}

現在，我想對所有這些參考進行映射，以顯示護理人員必須執行的完整訪問清單，但要提供正確的患者信息和詳細信息，以及最終的患者地址。

到目前為止，我發現的所有插件都為必須創建JSON API的后端開發人員使用。

相反，執行請求后，我需要瀏覽器可讀的“內容”：JavaScript或更好的是Angular。

任何想法？

Answer 1

您可以嘗試跟隨

JS

提取數據：

  var fetchVisits = function() {

      fetch('www.example.com/visits?include=client').then(function(data){
         return data.json();
      })
  }

制圖

fetchVisits().then(function(jsonData){

  jsonData.data.foreach(function(visit) {

      jsonData.included.forEach(function(client){

          if(visit.attributes['client-id'] == client.id) {
             visit.attributes.client_object = client;
          }

      });

  })

});

因此，之后您可以渲染映射的數據

Angular.js版本

   var app = angular.module('app', []);

   app.controller('VisitController', ['$scope', function($scope) {

      var vm = this;

      var fetchVisits = function(){ ... } // declare request function

      fetchVisits().then(function(jsonData){

          vm.visits = jsonData.data;

          vm.visits.data.foreach(function(visit) {

             jsonData.included.forEach(function(client){

               if(visit.attributes['client-id'] == client.id) {
                   visit.attributes.client_object = client;
               }

             });

             $scope.$apply()

           })

       });

   }])

HTML

<html data-ng-app="app">
<head></head>
<body>
<div data-ng-controller="VisitController as vm">

    <div data-ng-repeat="visit in vm.visits">

        <p>Visit starts: {{visit.attributes.['starts-at']}}</p>
        <p>Visit starts: {{visit.attributes.['ends-at']}}</p>

        <p>Client {{visit.attributes.client_object['first_name']}} {{visit.attributes.client_object['last_name']}}</p>

    </div>

</div>
</body>
</html>