如何将数组转换为 CSML 中的组件?

How to transform an array into a Component in CSML?

我在 CSML 中创建了一个聊天机器人,我正在尝试找到一种将数组集成到轮播中的方法。 我的问题是我无法在 Carousel 组件内循环。

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
    ]
  )

谢谢!

您需要遍历数组以获得 component-compatible Card() 组件列表,这里是供参考的文档:https://docs.csml.dev/studio/channels/slack/message-formats#carousel-card

所以下面的代码可以工作:

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