Sorting data

Code Library
1

PRE-REQUISITES
For the following code examples to work, you will need to add Fliplet’s Data Sources API to your app. To add it follow the steps referenced here.

Reordering a list or table of data to be used in your app

This example assumes you’re getting your data from a Fliplet Data Source. Fliplet’s Data Sources follow a certain structure. Data from a Fliplet Data Source will be an array (eg, a list) of objects (eg, a row of data). And each object will have the following properties:

  • id – this is a unique number referring to the row
  • data – this is an object with all the row values
  • order – this is the row number (starting at 1)
  • createdAt – the date and time the row entry was created
  • updatedAt – the date and time the row entry was updated (if at all)
  • dataSourceId – the ID of the data source the data sits in

You can see an example data structure with 3 rows (aka entries or records) below.

JavaScript

var entries = [{
  id: 14355928,
  data: {
    'Email': 'jsmith@email.com',
    'Title': 'Consultant',
    'Sectors': 'Management, Finance, Business',
    'Location': 'London',
    'Last Name': 'Jane',
    'First Name': 'Mary'
  },
  order: null,
  createdAt: '2020-04-02T15:53:13.926Z',
  updatedAt: '2020-04-02T15:53:13.926Z',
  deletedAt: null,
  dataSourceId: 202547
}, {
  id: 14355927,
  data: {
    'Email': 'jsmith@email.com',
    'Title': 'Head of Product',
    'Sectors': 'Software, IT, Programming, Design, Development, Management',
    'Location': 'London',
    'Last Name': 'Smith',
    'First Name': 'John'
  },
  order: null,
  createdAt: '2020-04-02T15:53:13.926Z',
  updatedAt: '2020-04-02T15:53:13.926Z',
  deletedAt: null,
  dataSourceId: 202547
}, {
  id: 14355926,
  data: {
    'Email': 'jasmith@email.com',
    'Title': 'Head of Marketing',
    'Sectors': 'Software, IT, Marketing, Design',
    'Location': 'London',
    'Last Name': 'Smith',
    'First Name': 'Jane'
  },
  order: null,
  createdAt: '2020-04-02T15:53:13.926Z',
  updatedAt: '2020-04-02T15:53:13.926Z',
  deletedAt: null,
  dataSourceId: 202547
}];

We’ve saved the above data to a variable called ‘entries’. To get the first row of data from the entries we can use the following code:

JavaScript

var firstEntry = entries[0];

We use ‘0’ because the numbering starts at ‘0’ (ie, 0,1,2,3,4… so the second entry is at number 1).

To get the Email of the first entry you could write:

JavaScript

var firstEmail = entries[0].data['Email'];

To sort the data Fliplet recommends using the lodash.js library. This is preinstalled in your Fliplet app (but you can use JavaScript’s .sort() method of Array if you are more comfortable with that).

The example below connects to a Fliplet Data Source and then uses lodash to order the records by ‘Last Name’ in ascending order.

JavaScript

Fliplet.DataSources.connect(87956)
  .then(function (connection) {
    return connection.find();
  }).then(function (records) {
    records = _.orderBy(records, ['data.[Last Name]'], ['asc']);
  });

You can also specify multiple fields to order the data by. For example, we can order the data by “Last Name” and then by “Age” in ascending order.

JavaScript

Fliplet.DataSources.connect(87956)
  .then(function (connection) {
    return connection.find();
  }).then(function (records) {
    records = _.orderBy(records, ['data.[Last Name]', 'data.[Age]'], ['asc', 'asc']);
  });

It’s important to note the numbers are stored as text in a Fliplet Data Source. This is important to know when sorting and filtering your data. When putting letters in alphabetical order “a” comes before “aa” which comes before “b”. But for numbers “1” comes before “11” but “11” does not come before “2”. To ensure that numbers are filtered (and sorted) as numbers we need to convert them from strings (aka text) into a number.

If your numbers don’t have any decimal places you can use parseInt() (find more about it here). If they do you can use parseFloat() (find more about it here). In the example below, we’re using parseInt() on the age data (the ’10’ in the code denotes that we’re converting from text to a decimal number). We are then ordering the data by “Age”.

JavaScript

Fliplet.DataSources.connect(87956)
  .then(function (connection) {
    return connection.find();
  }).then(function (records) {
    records = _.orderBy(records, function (record) {
      return parseInt(record.data['Age'], 10);
    }, ['asc']);
  });