While there is many ways to retrieve the data from our API. We have built a library to help our clients with this task. Syrup.js works by utilising a number of libraries to carry out a number of tasks on the API JSON data and providing a simple to understand output.
You can download some examples of how this library is integrated into the Host (client survey) here.
So how does it work?
First you will need to include these custom JS scripts into the page that retries/triggers the API data retrial process.
Must include these Required Scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"
integrity="sha256-KLt4XkpH4F3e5FHHsQMk9iPOhen2S4g/Lpu4nanttL0="
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"
integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"
integrity="sha256-fKCEY8Tw1ywvNmNo7LXWhLLCkh+AP8ABrNR5S3SmSvs="
crossorigin="anonymous">
</script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/conceptsauce/syrup@v1.0.0/dist/syrup.min.js"></script>
Then in main body of the HTML page we include all the below code, working in stages we can put together the right structrue to pull all the data we need using Syrup.js and merge this as part of the main data set.
1 - For testing only
For testing purposes only you can include the below snippet first, but this must be removed after testing for the live project code:
// only for demo, do not use timers to wait for data from the API
// or to make buttons visible / hidden etc. whilst waiting for data
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
2 - Key parameters
we specify the key parameters first, such as the projectID, pageID and respondentID. Naturally this an be dynamically changed/fed depending on each respondent.
// Main function to read data from the CS API and process it
async function doit() {
// replace the projectID, pageID and respondentID with your own values
r = await syrup.fetchRespondentData({
projectID: '0d3b3b33-ade0-42f4-baa3-3d15cc7f9724',
pageID: 'bcf82dd7-8313-458e-b898-3ee9b51110f5',
respondentID: 'DEMORSP',
})
console.log('Respondent data is now loaded')
3 - Respondent results
In the below example we are asking for the Basket Content results.
We understand that some clients will not have the in-house capability to develop the right script, as such we are always on hand to help our clients. Please contact us for direction and help with this if needed
// As an example we will extract the basket contents for a specified question
console.log('Basket content object:')
console.log(
r
.questions()
.qTitle('Control')
.baskets()
.get()[0].basketContent
)
console.log(
"Simple basket object (easier to get at SKUs etc if you don't need all the data in the full result set):"
)
console.log(r.questions().simpleBasketObj())
4 - Close Script
Here we are closing the script, but also for testing we have a sleep function, please make sure this is not included in the live project.
// For demo only to illustrate a delay such as may happen in real async processing of the data
await sleep(3000)
// when all is done make any hidden elements visible
// can be used, for example, to keep users from being able to hit a next button
// before processing is complete
document.getElementById('some_id').style.visibility = 'visible'
5 - The HTML code
In many cases using a hidden filed to map the data to is the best method. Here is an example of where the results are outputted to.
<h3>CS API HTML page demo</h3>
<p>
This page shows how to load the CS Syrup API into a web page and use
it to gather data about a respondents purchases on a given question.
</p>
<p>
To run the example:
<span style="font-weight: bold"
>Open the JS console and enter doit() and press return.</span
>
</p>
<p>
Below there is a hidden text that will become visible only after the
data has been retrieved and printed to the console.
</p>
<p id="some_id" style="visibility: hidden">
Whatever button or text needs to only be available after the data
has been gathered from the CS API
</p>
The whole example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"
integrity="sha256-KLt4XkpH4F3e5FHHsQMk9iPOhen2S4g/Lpu4nanttL0="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"
integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"
integrity="sha256-fKCEY8Tw1ywvNmNo7LXWhLLCkh+AP8ABrNR5S3SmSvs="
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/conceptsauce/syrup@v1.0.0/dist/syrup.min.js"></script>
</head>
<body>
<script>
// only for demo, do not use timers to wait for data from the API
// or to make buttons visible / hidden etc. whilst waiting for data
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
// Main function to read data from the CS API and process it
async function doit() {
// replace the projectID, pageID and respondentID with your own values
r = await syrup.fetchRespondentData({
projectID: '0d3b3b33-ade0-42f4-baa3-3d15cc7f9724',
pageID: 'bcf82dd7-8313-458e-b898-3ee9b51110f5',
respondentID: 'DEMORSP',
})
console.log('Respondent data is now loaded')
// As an example we will extract the basket contents for a specified question
console.log('Basket content object:')
console.log(
r
.questions()
.qTitle('Control')
.baskets()
.get()[0].basketContent
)
console.log(
"Simple basket object (easier to get at SKUs etc if you don't need all the data in the full result set):"
)
console.log(r.questions().simpleBasketObj())
// For demo only to illustrate a delay such as may happen in real async processing of the data
await sleep(3000)
// when all is done make any hidden elements visible
// can be used, for example, to keep users from being able to hit a next button
// before processing is complete
document.getElementById('some_id').style.visibility = 'visible'
}
</script>
<h3>CS API HTML page demo</h3>
<p>
This page shows how to load the CS Syrup API into a web page and use
it to gather data about a respondents purchases on a given question.
</p>
<p>
To run the example:
<span style="font-weight: bold"
>Open the JS console and enter doit() and press return.</span
>
</p>
<p>
Below there is a hidden text that will become visible only after the
data has been retrieved and printed to the console.
</p>
<p id="some_id" style="visibility: hidden">
Whatever button or text needs to only be available after the data
has been gathered from the CS API
</p>
</body>
</html>