如何使用Google Actions SDK遍历JS对象数组并在Google Assistant应用中显示列表选择器

Question

I have searched in all the documentation here https://developers.google.com/actions/assistant/responses

In documentation for "List Selector" all the examples are using static and fixed amount of data. For a real scenario I am calling a RestAPI and getting the response in js object which has array of objects which I want to iterate and show that information in List Selector.

Below is the example of List Selector given in the documentation of actions sdk of google assistant.

function list (app) {
app.askWithList(app.buildRichResponse()
.addSimpleResponse('Alright')
.addSuggestions(
  ['Basic Card', 'List', 'Carousel', 'Suggestions']),
// Build a list
app.buildList('Things to learn about')
// Add the first item to the list
.addItems(app.buildOptionItem('MATH_AND_PRIME',
  ['math', 'math and prime', 'prime numbers', 'prime'])
  .setTitle('Math & prime numbers')
  .setDescription('42 is an abundant number because the sum of its ' +
    'proper divisors 54 is greater…')
  .setImage('http://example.com/math_and_prime.jpg', 'Math & prime numbers'))
// Add the second item to the list
.addItems(app.buildOptionItem('EGYPT',
  ['religion', 'egpyt', 'ancient egyptian'])
  .setTitle('Ancient Egyptian religion')
  .setDescription('42 gods who ruled on the fate of the dead in the ' +
    'afterworld. Throughout the under…')
  .setImage('http://example.com/egypt', 'Egypt')
)
// Add third item to the list
.addItems(app.buildOptionItem('RECIPES',
  ['recipes', 'recipe', '42 recipes'])
  .setTitle('42 recipes with 42 ingredients')
  .setDescription('Here\'s a beautifully simple recipe that\'s full ' +
    'of flavor! All you need is some ginger and…')
  .setImage('http://example.com/recipe', 'Recipe')
)
);
}

Now when I am adding an iterator over array of js object before .addItems() there is showing error of syntex as we can't add any line above it.

Any idea on how can we iterate over here and do .addItems() when we can't write anything above .addItems() ?

Answer 1

It is easy once you create the list outside app.askWithList() as below.

function parseAndShowMessages(app, data) {
let list = app.buildList('test Messages')
for (var i = 0; i < data.response.messages.length; i++) {
  list.addItems(app.buildOptionItem(data.response.messages[i].subject,'')
    .setTitle(data.response.messages[i].from_name)
    .setDescription(data.response.messages[i].subject + '  \n' + data.response.messages[i].body)
    .setImage(IMG_URL_PICTURE,data.response.messages[i].subject)
  )
}

if (data.response.messages.length > 1) {
  app.askWithList(app.buildRichResponse()
    .addSimpleResponse('Sure, Below are your messages.')
    .addSuggestions(['Appointments']),list);
}
}

In above data is the response js object of RestAPI and data.response.messages has an array of js objects.

Note: According to actions sdk there must be minimum two items with different title in List Selector.