Retrieving Linked Entry Fields in Contentful with Angular (Ionic)

Question

I'm new to Contentful and Angular (working in Ionic) and having some difficulty sorting out how to properly retrieve field data from a Contentful entry's related content (aka "Link").

As things stand, I can list my entries according to the 'Terms' factory, and can move to an individual entry state in which I can list the linked content by--obvious as you see here--just the id.

I feel like this can be resolved in the/a factory, but just not quite sure how to proceed. Nothing that I've tried has so far worked. And, if it's the case that I'm going about this all wrong, I'm happy to be told so.

Many thanks in advance.

services.js

angular.module('app.services', ['ngResource'])

.factory('Terms', function ($resource, $log) {

  var apiGetEntries = 'https://cdn.contentful.com/spaces/SPACE_ID/entries?access_token=MY_ACCESS_TOKEN';

  var terms = $resource(apiGetEntries, null, {

    query: {
      method: 'GET',
      isArray: true,
      transformResponse: function(data, headers) {
        var entriesRaw = angular.fromJson(data);
        var entries = [];
        angular.forEach(entriesRaw.items, function(entry) {
          entries.push(entry);
        });
        console.log(entries);
        return entries;
      }
    }

  });

  return terms;

})

controllers.js

angular.module('app.controllers', [])

.controller('getTerms', function($scope, Terms) {

  $scope.terms = Terms.query();

})

.controller('getTermDetail', function($scope, $http, $stateParams) {

  var apiBasePath = 'https://cdn.contentful.com/spaces/SPACE_ID/entries/';
  var accessToken = 'MY_ACCESS_TOKEN';
  var termId      = $stateParams.termId;

  $http({
    url: apiBasePath + termId, 
    method: "GET",
    params: { access_token: accessToken }
  }).success(function(data, status, headers, config) {
      $scope.term = data;
      if(typeof $scope.term.fields.relatedTo != 'undefined') {
        $scope.relatedTerms = $scope.term.fields.relatedTo
      }
    }).error(function(data, status, headers, config) {
      console.log(data);
    })

});

templates/term-definition.html

<ion-view view-title="Definition">
  <ion-content class="padding">
    <h2>{{ term.fields.term }}</h2>
    <p>
      {{ term.fields.definition }}
    </p>
    <ion-list>
      <ion-item class="" ng-repeat="relatedTerm in relatedTerms" type="item-text-wrap" href="#/tab/terms/{{ relatedTerm.sys.id }}">
        {{ relatedTerm.sys.id }}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

You don't need to do all of this by hand unless you have a very specific use case. You can use the official Contentful JS SDK or the third party Angular JS Contentful integration. Both of them deal with link resolution automatically. You can see more info about links here https://www.contentful.com/developers/docs/concepts/links/ and here https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/links

Hope that helps :)