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?

Must include these Required Scripts

First you will need to include these custom JS scripts into the page that retries/triggers the API data retrial process. Otherwise the whole thing will not work!

<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 the clients survey platform. As this will then populate each field according to the system/parameters set by the Clients programmers. i.e. What is the respondentID etc..

// 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

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.

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.

Knowledge Base

Retrieving Data from the API using Syrup.JS

Analytics