How to transform an array into a Component in CSML?

Question

I have created a chatbot in CSML and I'm trying to find a way to integrate an array into a carousel. My problem is that I can't loop inside the Carousel component.

mainCourse:

// my array 
do menu = [
    { "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
    ...
  ]

say "Thank you, I also love {{firstChoice}} "
say "Which pizza would you like? "
say Carousel(
    cards = [
      // Where I'd like to include my array
    ]
  )

thanks!

score 0 · Accepted Answer · answered Aug 03 '20 at 10:54

You need to iterate through the Array in order to have a component-compatible list of Card() components, here is the doc for reference: https://docs.csml.dev/studio/channels/slack/message-formats#carousel-card

So the code below would work:

start:
  do menu = [
    { "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Diavola", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/11-diavola.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
    { "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
  ]
  
  // You create an empty array
  do cards = []

  // You loop through your array and foreach entry you create a Card() component
  // that you add to the array that'll you'll later use for the Carousel() component
  foreach (v, i) in menu {
    do newCard = Card(
      title=v.name,
      subtitle=v.type,
      image_url=v.image,
      buttons=[Button("Choose")]
    )
    do cards.push(newCard)
  }
  say Carousel(cards=cards)
goto end

How to transform an array into a Component in CSML?

1 Answers1