Map a JSON API object returned from a Http request in JavaScript/Angular

Question

I am working for the first time with JSON API returned from a Http Request. I usually use JSON but instead of having ID references they usually had all the information needed in the same node.

These kind of JSON are different, the returned objects have only the data array (in the following example). For this reason, they are not complete if I want to show more information about the patient in the same page. To have all the patient information, in my Ajax request, I have to add the parameter /visits?include=client at the end of the url.

The following example, the JSON contains basically some carer visits. Each visit has its own client ID that correspond to the ID that is returned in the included array with its own address ID that I can eventually retrieve by adding another parameter to the url and that is returned in the included array as well.

The example response is something like this:

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

Now, I would like to map all these references to show the complete visits list the carer has to perform but with the correct patient information and details and eventually the patient address.

All the plugin that I have found until now are working for a backend developer that have to create the JSON API.

Instead I need "something" that is browser readable when the request has been performed: something JavaScript or, even better, Angular.

Any idea?

Answer 1

You can try followng

JS

Fetching data:

  var fetchVisits = function() {

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

Mapping

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

      });

  })

});

So after that you can render your mapped data

Angularjs version

   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>