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

Question

我正在首次使用從Http請求返回的JSON API進行操作。我通常使用JSON，但不是具有ID引用，而是通常具有同一節點中所需的所有信息。

這些類型的JSON是不同的，返回的對象只有data數組（在下面的例子中）。由於這個原因，如果我想在同一頁面上顯示關於患者的更多信息，它們並不完整。要獲得所有患者信息，在我的Ajax請求中，我必須在url的末尾添加參數/visits?include=client。

以下示例中，JSON基本上包含一些看護者訪問。每次訪問都有自己的客戶端ID，這些ID與included陣列中返回的ID相對應，後者具有自己的地址ID，我最終可以通過向url中添加另一個參數並在included陣列中返回該地址來檢索該ID。

的例子迴應是這樣的：

{ 
    "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

您可以嘗試followng

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; 
      } 

     }); 

    }) 

}); 

後，你可以使你的映射數據

所以

個Angularjs版本

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>