在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>