Question

我第一次使用Http请求返回的JSON API。我通常使用JSON，但它没有ID引用，而是通常拥有同一节点所需的所有信息。

这些JSON是不同的，返回的对象只有data数组（在下面的例子中）。因此，如果我想在同一页面中显示有关患者的更多信息，则它们不完整。要获取所有患者信息，在我的Ajax请求中，我必须在网址末尾添加参数/visits?include=client。

以下示例中，JSON基本上包含一些护理者访问。每次访问都有自己的客户端ID，对应于included数组中返回的ID，该ID具有自己的地址ID，我最终可以通过向URL添加另一个参数来检索该ID，并在{{1}中返回数组也是如此。

示例响应是这样的：

included

现在，我想映射所有这些参考文献，以显示护理人员必须执行的完整访问列表，但是具有正确的患者信息和详细信息，并最终显示患者地址。

到目前为止，我找到的所有插件都适用于必须创建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>

映射从JavaScript / Angular

1 个答案: