Versions Compared

Version Old Version 1 New Version Current
Changes made by

Abs Chamali

Abs Chamali

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
breakoutModewide
languagejs
<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>

...

For testing purposes only you can include the below snippet first, but this must be removed after testing for the live project code:

wide
Code Block
breakoutMode
languagejs
// 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))
 }

...

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

wide
Code Block
breakoutMode
languagejs
// 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')

...

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

Code Block
breakoutModewide
languagejs
// 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())

...

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.

breakoutMode
Code Block
widelanguagejs
// 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'

...

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.

Code Block
breakoutModewide
languagehtml
<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

wide
Code Block
breakoutMode
languagehtml
<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>