在 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 数组中返回.

示例响应是这样的：

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

      });

  })

});

这样你就可以渲染你的映射数据了

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>