Search code examples
htmlangularjsjsonbackand

How to get a value of a object from its foreign key?


Im using Backand to store my data. I have an object, Events, that references another object, Locations.

  {
    "name": "events",
    "fields": {
      "eventCommentsId": {
        "collection": "comments",
        "via": "eventId"
      },
      "tags": {
        "collection": "events_tags",
        "via": "event"
      },
      "users": {
        "collection": "users_events",
        "via": "event"
      },
      "name": {
        "type": "string"
      },
      "date": {
        "type": "datetime"
      },
      "time": {
        "type": "datetime"
      },
      "info": {
        "type": "text"
      },
      "locationId": {
        "object": "locations"
      }
    },
  {
    "name": "locations",
    "fields": {
      "events": {
        "collection": "events",
        "via": "locationId"
      },
      "name": {
        "type": "text"
      },
      "geo": {
        "type": "point"
      }
    }
  }

When I try to display the location of the event, I can only get the value of locationID. I want the actual name of the location, not the id. How do I do that?

<ion-list>
  <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" href="#/event-detail/{{event.id}}">
      <h2>{{event.name}}</h2>
      <p><i class="ion-location"></i> {{event.locationId.name}}</p>
    <ion-option-button class="button-assertive" ng-click="deleteEvent(event.id)">
      Delete
    </ion-option-button>
  </ion-item>
</ion-list>

angular code

.service('EventService', function ($http, Backand) {
  var baseUrl = '/1/objects/';
  var objectName = 'events/';

  function getUrl() {
    return Backand.getApiUrl() + baseUrl + objectName;
  }

  function getUrlForId(id) {
    return getUrl() + id;
  }

  getEvents = function () {
    return $http.get(getUrl());
  };

  addEvent = function(event) {
    return $http.post(getUrl(), event);
  }

  deleteEvent = function (id) {
    return $http.delete(getUrlForId(id));
  };

  getEvent = function (id) {
    return $http.get(getUrlForId(id));
  };

  return {
    getEvents: getEvents,
    addEvent: addEvent,
    deleteEvent: deleteEvent,
    getEvent: getEvent
  }
})

.controller('FeedCtrl', ['$scope', '$ionicModal', '$ionicSideMenuDelegate', 'EventService',  function($scope, $ionicModal, $ionicSideMenuDelegate, EventService) {

  $scope.events = [];
  $scope.input = {};

  function getAllEvents() {
    EventService.getEvents()
    .then(function (result) {
      $scope.events = result.data.data;
    });
  }

  $scope.addEvent = function() {
    EventService.addEvent($scope.input)
    .then(function(result) {
      $scope.input = {};
      getAllEvents();
    });
  }

  $scope.deleteEvent = function(id) {
    EventService.deleteEvent(id)
    .then(function (result) {
      getAllEvents();
    });
  }

  getAllEvents();

}])

Solution

  • There are two options. You can either use the descriptive value in the __metadata of each object like this: request: https://api.backand.com/1/objects/events?pageSize=20&pageNumber=1

    response:

    {
      "totalRows": 2,
      "data": [
        {
          "__metadata": {
            "id": "1",
            "fields": {
              "id": {
                "type": "int",
                "unique": true
              },
              "name": {
                "type": "string"
              },
              "date": {
                "type": "datetime"
              },
              "time": {
                "type": "datetime"
              },
              "info": {
                "type": "text"
              },
              "locationId": {
                "object": "locations"
              }
            },
            "descriptives": {
              "locationId": {
                "label": "Madison Square Garden",
                "value": "1"
              }
            },
            "dates": {
              "date": "",
              "time": ""
            }
          },
          "id": 1,
          "name": "knicks vs warriors",
          "date": null,
          "time": null,
          "info": "",
          "locationId": "1"
        },
        {
          "__metadata": {
            "id": "2",
            "fields": {
              "id": {
                "type": "int",
                "unique": true
              },
              "name": {
                "type": "string"
              },
              "date": {
                "type": "datetime"
              },
              "time": {
                "type": "datetime"
              },
              "info": {
                "type": "text"
              },
              "locationId": {
                "object": "locations"
              }
            },
            "descriptives": {
              "locationId": {
                "label": "Madison Square Garden",
                "value": "1"
              }
            },
            "dates": {
              "date": "",
              "time": ""
            }
          },
          "id": 2,
          "name": "knicks vs cavs",
          "date": null,
          "time": null,
          "info": "",
          "locationId": "1"
        }
      ]
    }
    

    or you can do a deep request and get the value in the relatedObjects request: https://api.backand.com/1/objects/events?pageSize=20&pageNumber=1&deep=true

    response:

    {
      "totalRows": 2,
      "data": [
        {
          "__metadata": {
            "id": "1",
            "fields": {
              "id": {
                "type": "int",
                "unique": true
              },
              "name": {
                "type": "string"
              },
              "date": {
                "type": "datetime"
              },
              "time": {
                "type": "datetime"
              },
              "info": {
                "type": "text"
              },
              "locationId": {
                "object": "locations"
              }
            },
            "descriptives": {
              "locationId": {
                "label": "Madison Square Garden",
                "value": "1"
              }
            },
            "dates": {
              "date": "",
              "time": ""
            }
          },
          "id": 1,
          "name": "knicks vs warriors",
          "date": null,
          "time": null,
          "info": "",
          "locationId": "1"
        },
        {
          "__metadata": {
            "id": "2",
            "fields": {
              "id": {
                "type": "int",
                "unique": true
              },
              "name": {
                "type": "string"
              },
              "date": {
                "type": "datetime"
              },
              "time": {
                "type": "datetime"
              },
              "info": {
                "type": "text"
              },
              "locationId": {
                "object": "locations"
              }
            },
            "descriptives": {
              "locationId": {
                "label": "Madison Square Garden",
                "value": "1"
              }
            },
            "dates": {
              "date": "",
              "time": ""
            }
          },
          "id": 2,
          "name": "knicks vs cavs",
          "date": null,
          "time": null,
          "info": "",
          "locationId": "1"
        }
      ],
      "relatedObjects": {
        "locations": {
          "1": {
            "__metadata": {
              "id": "1",
              "fields": {
                "id": {
                  "type": "int",
                  "unique": true
                },
                "events": {
                  "collection": "events",
                  "via": "locationId"
                },
                "name": {
                  "type": "text"
                },
                "geo": {
                  "type": "point"
                }
              },
              "descriptives": {},
              "dates": {}
            },
            "id": 1,
            "events": null,
            "name": "Madison Square Garden",
            "geo": [
              40.7505,
              73.9934
            ]
          }
        }
      }
    }
    

    search for Madison Square Garden as the name of the location to understand the JSON structure. You can set the descriptive field in the Object Settings