Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WDC Promise Samples
<script src="es6-promise.min.js"></script>
<script src="jquery.min.js"></script>
<script src="wdc-sdk.js"></script>
<script src="your_wdc.js"></script>
var pageNumbers = [1, 2, 3],
allResults = [];
// Loop through all pages.
pageNumbers.forEach(function (page) {
$.getJSON('https://api.example.com?page=' + page, function (response) {
console.log('Later: Got data for page ' + page);
allResults.push(response.records);
});
});
console.log('First: No data yet!');
$.getJSON('https://api.example.com', function (response) {
// Executed later, once api.example.com responds with data.
console.log('Second: Just got data!');
});
// Executed immediately, even before the API responds.
console.log('First: No data yet!');
// Return a Promise for the given URL.
var returnApiDataFor = function(url) {
return new Promise(function(fulfill, reject) {
// When the promise is invoked, send the request.
$.getJSON(url, function (response) {
// Fulfill the promise with data returned.
fulfill(response.records);
});
});
};
// Invoke the promise for a given URL.
returnApiDataFor('https://api.example.com')
// Once the promise is fulfilled...
.then(function (records) {
// Pass data to Tableau.
tableau.dataCallback(records);
});
myConnector.getTableData = function(lastRecordToken) {
// If Tableau gave a page, use it. But default to 1.
var pageNumber = lastRecordToken ? lastRecordToken + 1 : 1;
// Load this page of data from the API.
$.getJSON('https://api.example.com?page=' + pageNumber, function (response) {
// Check if the current page is not the last page.
var hasMoreData = pageNumber < response.metadata.lastPage;
// Pass data and current page back to Tableau. If
// hasMoreData evaluated to TRUE, Tableau will call
// getTableData again using this pageNumber value.
tableau.dataCallback(response.records, pageNumber, hasMoreData);
});
}
// Use the same Promise return helper from above.
var returnApiDataFor = function(url) {
return new Promise(function(fulfill, reject) {
$.getJSON(url, function (response) {
fulfill(response.records);
});
});
};
// Define a helper to map a URL and page list to Promises.
var allPromisesFor = function(baseUrl, pages) {
// Map each page to a URL wrapped in a Promise to retrieve its data.
return pages.map(function(pageNumber) {
return returnApiDataFor(baseUrl + '?page=' + pageNumber);
});
};
// Invoke all Promises for a given base URL and pages.
Promise.all(allPromisesFor('https://api.example.com', [1, 2, 3])
// Once all promises are fulfilled...
.then(function (recordSet) {
var allRecords = [];
// Concatenate / union all page responses to a single array.
recordSet.forEach(function(records) {
allRecords = allRecords.concat(records);
});
// Pass the complete data set to Tableau.
tableau.dataCallback(allRecords);
});
@WILLCL87

This comment has been minimized.

Copy link

@WILLCL87 WILLCL87 commented May 14, 2021

Hi is there any more information on how this could be used in a complete example? Promises are already confusing enough, so i can't figure out how i would incorporate promises into a really basic WDC that works of the tableau examples. How exact would the my.connector.getData change when using promises, do you still keep the table structure?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment