Dynamicly populating carousel

Studio
1

I would like to dynamically populate a carousel with information I get from API call.
How can I do that? I need to have an image (from URL), text, description, title, and Register button with custom url.

1 Like
2

Hi @vadimgg ,

In order to generate a dynamic carousel, we have to store the results inside an array of objects.

let result = [{
title:"Name",
text:"description"
image:"imagelink"
actions : [{
  title: 'Register',
  url:"url"
}]
}]

This could help you achieve your use case, Please let us know incase of any queries

Thanks

1 Like
3

Is there a way to spawn a carousel from code?
How would it look like? can you give an example?

1 Like
4

Hi @Gowtham_Kishore ,

This isn’t working in the latest interface. Could you please tell us if we need to modify the code to populate the carousel dynamically?

Thanks.

@Jaya_Banbah , @vadimgg

1 Like
5

Hey Sindhu,

Can you please share more information? Does it show any error when you use the carousel?
PS: @Gowtham_Kishore suggested that you should check the data type of variables. It should be either string or object to work well carousel.

Thanks!

6

Here is a sample code

return new Promise(resolve => {

// add your extra codes

let arr = [];
let records = your-data-receieved-from-api;
for(let i=0; i< records.length; i++) {
    let card = {
        "title": records[i].name,
        "description": "card description goes here",
        "image": records[i].image_url,
        "text": "Visible text in card - will be shown bellow title"
        "actions": [
            {
                "title": "Register",
                "buttonDefault": "text",
                "text": "button value"
            }
        ],
        };
}
arr.push(card);

// add your extra codes

resolve(arr); // finally return the array at last

Also make sure the variable in the function node should be an array datatype; which will be further used in carousel.