Get data from two or more related Fliplet Data Sources

It is reasonably common to want to create a couple of tables of data (Data Sources) and then realise that one needs to reference the other. An example would be an event app. It has a list of articles (with data of title, date, content) and a list of comments (with data of comment text, author, likes). But you want to display the comments (and their data) at the bottom of each article. Instead of duplicating the data you can simply create a link between the two Data Sources.

Below we’ve set up the two tables for Articles and Comments. You can do this in the App Data section of Fliplet Studio.

Articles table with ID 123.

Comments table with ID 789

Add data from one data source to another

In our example – we want to display the list of articles and then within each one display the list of relevant comments and likes. We know that an article may have many comments but each comment can only be attached to one article. This is known as a ‘one to many’ relationship.

We need to create a link between the two Data Sources. It’s easier to do this in the comments data source as we only have to add the ID of a single article per comment (the other way round we’d have to add all the IDs of multiple comments per article). So we add an extra column to the comments Data Source called Article ID (the new ‘Article ID’ column is on the right).

In the code below we connect to our Articles Data Source (that has an ID of 123) and then we get the comments for that article from the Comments Data Source (that has an ID of 789) by selecting only the comments that have an Article ID that matches the ID of our article.

Fliplet.DataSources.connect(123)
  .then(function (connection) {
    return connection.find({
      join: {
        Comments: {
          dataSourceId: 789,
          on: {
            'data.ID': 'data.ArticleID'
          }
        }
      }
    });
  }).then(function (entries) {
    // Returns an Array of entries

    /* entries will have the following structure
    [
      {
        id: 1,
        dataSourceId: 123,
        data: {
          'ID': 1,
          'Title': 'A great blog post',
          'Content': 'This is the article content...'
        },
        join: {
          Comments: [
            {
              id: 1,
              dataSourceId: 789,
              data: {
                'ArticleID': 1,
                'Author': 'Ian',
                'Comment text': 'Thanks! This was worth reading.',
                'Likes': 5
              }
            }
          ]
        }
      },
      {
        id: 2,
        dataSourceId: 123,
        data: {
          'ID': 2,
          'Title': 'Something worth reading',
          'Content': 'This is the article content...'
        },
        join: {
          Comments: [
            {
              id: 2,
              dataSourceId: 789,
              data: {
                'ArticleID': 2,
                'Author': 'Lisa',
                'Comment text': 'Loved it, would read it again.',
                'Likes': 2
              }
            }
          ]
        }
      }
    ]
    */
  });