如何在Google DialogFlow中控制OptionItems列表的显示顺序？

Great question! The issue you're facing is rooted in how plain JavaScript objects work: their keys are automatically sorted lexicographically (dictionary order), and Dialogflow's List component relies on this sorted key order when rendering your options. Since you're using outlet_id directly as the key for each OptionItem, the list gets rearranged instead of preserving your original insertion order.

Here are two practical solutions to resolve this:

Solution 1: Use Sequential Keys (Quickest Fix) #

Instead of using outlet_id directly as the key, generate sequential keys based on the order you add items (like item_0, item_1, etc.). This ensures Dialogflow renders the list in your desired order, and you can still link each option back to its outlet_id via synonyms.

const optionItems:{[key: string]: OptionItem} = {};

// Assume 'outlets' is your array of outlet data
outlets.forEach((outlet, index) => {
  const sequentialKey = `item_${index}`;
  optionItems[sequentialKey] = {
    synonyms: [outlet.outlet_id, sequentialKey], // Include outlet_id to recognize user selections
    title: outletOptionItemTitleText,
    description: outletOptionItemDescriptionText,
    image: {
      url: outletOptionItemImageUrlText,
      accessibilityText: outletOptionItemImageAccessibilityTextText,
    },
  };
});

conv.close(showAvailabilityText, new List({ items: optionItems }));

When handling user input, you can match the selected key (e.g., item_0) back to the corresponding outlet using the index, or use the outlet_id in the synonyms to identify the selection.

Solution 2: Use a Custom Payload (Full Control) #

For complete control over the list order, build a custom Google Assistant response payload. This lets you define options as an array, which preserves insertion order perfectly—no auto-sorting involved.

// Build the custom payload with a list that respects your order
const customListPayload = {
  "richResponse": {
    "items": [
      {
        "simpleResponse": {
          "textToSpeech": showAvailabilityText
        }
      }
    ]
  },
  "systemIntent": {
    "intent": "actions.intent.OPTION",
    "data": {
      "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
      "listSelect": {
        "title": showAvailabilityText,
        "items": outlets.map(outlet => ({
          "optionInfo": {
            "key": outlet.outlet_id,
            "synonyms": [outlet.outlet_id]
          },
          "title": outletOptionItemTitleText,
          "description": outletOptionItemDescriptionText,
          "image": {
            "url": outletOptionItemImageUrlText,
            "accessibilityText": outletOptionItemImageAccessibilityTextText
          }
        }))
      }
    }
  }
};

// Send the custom payload instead of the List object
conv.close(customListPayload);

This approach skips Dialogflow's automatic key sorting entirely, since the items array in the payload maintains exactly the order you define.

Which Solution Should You Choose? #

• Use Solution 1 if you want minimal code changes and don't mind mapping sequential keys back to your outlet_ids.
• Use Solution 2 if you need full control over the list structure or want to avoid key mapping logic.

内容的提问来源于stack exchange，提问作者Johannes N