Why does my dynamic carousel for my advanced AI agent fail to load?

Question

Answer

This error may occur even when everything is set up correctly. If the dynamic carousel intermittently fails to load, it could be due to the API integration not returning a properly formatted array that the carousel can read.

This block expects a parameter of type "array". However, some API endpoints may not always return an array, especially when only one product is found. Instead of wrapping the single item in an array, the response may return just the item itself. Without an array in the payload, the carousel will fail to load.

Here are the symptoms of this behavior:

A Technical error reply is observed from the conversation logs, although there aren't many hints on what the error is.

Inspecting the Network tab in the browser’s Developer Tools reveals that the carousel array is returned empty:

To fix this issue, update the JSONata query in the API integration to handle non-array responses and return a structure the carousel can process.

To illustrate, here’s a sample case:

data.payload.items.{
  "title": title,
  "description": description,
  "imageURL": imageURL
}

To avoid this issue, apply the following workaround by wrapping the data.payload object:

($items := data.payload.items; $exists($items[0]) ? $items : [$items])

This ensures the carousel functions correctly, even when only a single result is returned.

When an endpoint returns just one product instead of an array, the "products" parameter won’t appear in the response:

The object data is not returning an array, and from the API integration settings, we can see that the test fails to retrieve data because it expects a products parameter, which is not returned when only one item is found.

The data object does not return an array, and the API integration test fails because it expects a products parameter that isn’t included when only a single item is returned.

To resolve this issue, you can use the following example:

($data := data; $exists($data.products) ? $data.products[[0..2]] : [$data]).{
  "title": title,
  "description": $length(description)  128 ? $substring(description, 0, 125) & "..." : description,
  "thumbnail": thumbnail,
  "id": id
}

Disclaimer: This article is provided for instructional purposes only. Zendesk does not provide support for custom code or JSONata queries, and cannot guarantee their functionality. Post any issues you have in the comments section or try searching for a solution online.

For more information, see the following articles: