• Introduction
• Usage
• retrieve
• Properties
• add
• fetch
• initialize
• model
• models
• parse
• reset
• sync
• url
• Misc
• History

retrieve

This page describes how to retrieve a collection of resources using a Collection.

Basic Usage

Let's say you have an API endpoint located at http://localhost:1337/tweets that returns a collection of tweets that looks like this:

[
  {
    id: 1,
    text: 'An old tweet'
  },
  {
    id: 2,
    text: 'A new tweet'
  }
]

To retrieve those Tweets, we need to issue a GET request to http://localhost:1337/tweets that looks like this:

GET http://localhost:1337/tweets

The code below demonstrates how to do that using a Collection:

import { Collection } from 'lore-models';

const TweetCollection = Collection.extend({
  url: 'http://localhost:1337/tweets'
});

const tweets = new TweetCollection();

tweets.fetch();

First we import Collection from lore-models. Then we create a new Collection called TweetCollection, and provide the location of the API endpoint we want to interact with as the url property.

Once we have the TweetCollection created, we create an instance of that collection, and then we call tweets.fetch() to retrieve that collection of tweets through the API.

The tweets.fetch() call will result in a GET request, and an AJAX request will be sent that looks like this:

GET http://localhost:1337/tweets

Once the AJAX request returns, the tweets instance will be automatically updated, and you'll be able to view the resources via the toJSON() method of the instance, like this:

tweets.toJSON() = [
  {
    id: 1,
    text: 'An old tweet'
  },
  {
    id: 2,
    text: 'A new tweet'
  }
]

The tweets.fetch() method returns a promise. If you need access to the response object once the API call returns, you can do that using this code:

tweets.fetch().then(function(response) {
  // do something with response
})

The response object will have a structure that looks like this:

const response = {
  config: {
    headers: {
      Accept: "application/json, text/plain, */*"
    },
    method: "GET",
    responseType: "json",
    url: "http://localhost:1337/tweets"
  },
  data: [
    {
      id: 1,
      text: 'An old tweet'
    },
    {
      id: 2,
      text: 'A new tweet'
    }
  ],
  headers: {
    "content-type": "application/json"
  },
  request: {...}, // XMLHttpRequest
  status: 200,
  statusText: "OK"
};

Advanced Usage

Collections use the axios library for handling for all network request, and that means the properties you set on collections are ultimately just converted into a config object that axios understands.

For the fetch() method, that means the tweets.fetch() call we demonstrated above is ultimately converted into this axios call:

import axios from 'axios';

axios({
  url: 'http://localhost:1337/tweets',
  method: 'get',
  headers: {
    'Content-Type': 'application/json'
  }
})

If you need more control over your network requests, such as adding headers, or providing query parameters, simply provide an options object to get tweets.fetch() call like this:

tweets.fetch({
  headers: {
    'Content-Type': 'application/json'
    Authorization: 'Bearer token'
  },
  data: {
    page: 1
  }
})

This object will be passed directly to the axios call.

You can learn about all of the config options that axiossupports here.