Gather data from multiple connected Data Sources using one to link to another
PRE-REQUISITES
For reference see here: Data Sources JS APIs | Fliplet Developers Documentation
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.
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.
| ID | Title | Content |
|---|---|---|
| 1 | A great blog post | This is the article content… |
| 2 | Something worth reading | This is the article content… |
Comments table with ID 789
| Comment text | Author | Likes |
|---|---|---|
| Thanks! This was worth reading. | Ian | 5 |
| Loved it, would read it again. | Lisa | 2 |
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).
| Comment text | Author | Likes | ArticleID |
|---|---|---|---|
| Thanks! This was worth reading. | Ian | 5 | 1 |
| Loved it, would read it again. | Lisa | 2 | 2 |
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.
JavaScript
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
}
}
]
}
}
]
*/
});