Сопоставить объект API JSON, возвращенный из запроса Http, в JavaScript/Angular
Я впервые работаю с JSON API, возвращенным из запроса Http. Я обычно использую JSON, но вместо ссылок на идентификаторы они обычно имеют всю информацию, необходимую в одном узле.
Этот вид JSON отличается, возвращаемые объекты имеют только data массив (в следующем примере). По этой причине они не являются полными, если я хочу показать больше информации о пациенте на той же странице. Чтобы получить всю информацию о пациенте, в моем запросе Ajax я должен добавить параметр /visits?include=client в конце URL.
В следующем примере JSON содержит в основном несколько визитов по уходу. Каждое посещение имеет свой собственный идентификатор клиента, который соответствует идентификатору, который возвращается в included массив со своим собственным идентификатором адреса, который я в конечном итоге могу получить, добавив еще один параметр в 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.
Любая идея?
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>