How to set an object using amp-selector from a top-level array for use in amp-bind

Question

Following the autosuggest example , I need to save and use an object instead of a simple line from amp-selector.

This is the JSON from the API:

[{
    "name": "Singapore",
    "cityCode": "SIN",
    "countryName": "Singapore",
    "type": "city"
}, {
    "name": "Sinop",
    "cityCode": "NOP",
    "countryName": "Turkey",
    "type": "city"
}, {
    "name": "Sinop",
    "cityCode": "OPS",
    "countryName": "Brazil",
    "type": "city"
}]

Rendering using AMP:

    <amp-list
        class="autosuggest-box"
        layout="fixed-height"
        height="130"
        src="<url>"
        id="autosuggest-list"
        single-item 
        items="."
    >
        <template type="amp-mustache">
        <amp-selector
            id="autosuggest-selector"
            keyboard-select-mode="focus"
            layout="container"
            on="
            select:
                AMP.setState({
                    locationObj: event.targetOption,
                    showDropdown: false
                }),
                autosuggest-list.hide"
        >
            {{#.}}
            <div
                class="location-item no-outline"
                role="option"
                tabindex="0"
                on="tap:autosuggest-list.hide"
                option="{{.}}"
            >{{name}}, {{countryName}}</div>
            {{/.}}
        </amp-selector>
        </template>
    </amp-list>

Thanks to this answer for syntax {{.}}not found anywhere in Mustache docs. However, the linked field locationObjin amp-bind prints [object Object], and when I try to use locationObj.nameit printsnull

Here is the binding code

    <input
    type="text"
    class="search-box"
    on="
        input-debounced:
        AMP.setState({
            showDropdown: event.value
        }),
        autosuggest-list.show;
        tap:
        AMP.setState({
            showDropdown: 'true'
        }),
        autosuggest-list.show"
    [value]="locationObj ? locationObj.name : ''"
    value=""
    required
    autocomplete="off"
    />

The AMP docs don't say how to write anything to the console, so I have an idea of ​​what is installed in locationObjthrough{{.}}

Answer 1

Amp Google Forum. <amp-list> - <amp-state>.

<amp-list class="autosuggest-box"
    layout="fixed-height"
    height="130"
    src="http://url.returning.json.array.com?query="
    [src]="'http://url.returning.json.array.com?query=' + query"
    id="autosuggest-list"
    single-item 
    items=".">
    <template type="amp-mustache">
    <amp-selector
        id="autosuggest-selector"
        keyboard-select-mode="focus"
        layout="container"
        on="
        select:
            AMP.setState({
                locationObj: allLocations.filter(x=>x.code == event.targetOption)[0],
                showDropdown: false
            }),
            autosuggest-list.hide"
    >
        {{#.}}
        <div
            class="location-item no-outline"
            role="option"
            tabindex="0"
            on="tap:autosuggest-list.hide"
            option="{{code}}"
        >{{name}}, {{countryName}}</div>
        {{/.}}
    </amp-selector>
    </template>
</amp-list>

<amp-state
  id="allLocations"
  src="http://url.returning.json.array.com?query="
  [src]="'http://url.returning.json.array.com?query=' + query"
  ></amp-state>

[src] <amp-state>, <amp-list>, , (, allLocations.filter(x=>x.code == event.targetOption)[0] case) .