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!
| Code Block | ||
|---|---|---|
| ||
<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> |
...
we specify the key parameters first, such as the projectID, pageID and respondentID. Naturally this an be dynamically changed/fed depending on each respondentthe 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..
| Code Block | ||
|---|---|---|
| ||
// 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') |
...