Polymer dropdown data binding with AJAX response

Question

Polymer dropdown data binding with AJAX response

884 Views Asked by Ashton At 19 October 2024 at 17:25

I'm very new to JS and Polymer. Can't figure out why this is not working, I've rewritten it a millin times based on the few topics out there.

The idea is to have a very simple dropdown with it's choices data bound to the response of the AJAX request.

Based on the logging the AJAX is returning perfectly, but the data is not bound.

Can anyone help please?

The AJAX response:

var text = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Scripts and imports (probably more than it should be, I was experimenting with components)

<script src="../../static/bower/webcomponentsjs/webcomponents.js"></script>
<script src="../../static/npm/jquery/dist/jquery.js"></script>
<script src="../../static/npm/webanimations/web-animations.min.js"></script>    

<link rel="import" href="../../static/bower/font-roboto/roboto.html">
<link rel="import" href="../../static/bower/core-header-panel/core-header-panel.html">
<link rel="import" href="../../static/bower/core-toolbar/core-toolbar.html">
<link rel="import" href="../../static/bower/paper-tabs/paper-tabs.html">
<link rel="import" href="../../static/bower/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../static/bower/core-ajax/core-ajax.html">
<link rel="import" href="../../static/bower/polymer/polymer.html">
<link rel="import" href="../../static/bower/core-list/core-list.html">
<link rel="import" href="../../static/bower/core-collapse/core-collapse.html" >
<link rel="import" href="../../static/bower/core-menu/core-menu.html">
<link rel="import" href="../../static/bower/paper-dropdown/paper-dropdown.html">
<link rel="import" href="../../static/bower/paper-item/paper-item.html">

HTML

<body>

<polymer-element name="custom-selector" attributes="host data">
    <template>
        <template if="{{data.length == 0}}">
            <core-ajax auto 
                url="dosql" 
                on-core-response="{{updateData}}" 
                on-core-error="{{onError}}"
                response="{{yourData}}"
            </core-ajax>
        </template>
        <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}">
            <paper-dropdown class="dropdown">
            <core-menu class="menu">
                <template repeat="{{data in yourData}}">
                        <paper-item name="{{data.firstName}}">{{data.firstName}}</paper-item>
                </template>
            </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>

    <script>
        Polymer('custom-selector', {
            ready: function () { console.log('firing ready');
                this.host = this.host || 'example.com'; 
                this.data = this.data || []; 
            },
            onError: function (e, resp) { console.log('onError');
                console.log('error!: ' + resp.response);
            },
            updateData: function (e, resp) { console.log('firing updateData');
                console.log('AJAX response:');
                console.log(JSON.parse(resp.response));
                this.data = JSON.parse(resp.response);

                console.log('this.data is now:');
                console.log(this.data);
            }
        });
    </script>
</polymer-element>



<custom-selector></custom-selector>

</body>

Original Q&A

There are 1 best solutions below

**Bassdrop Cumberwubwubwub** · Accepted Answer

<template repeat="{{data in yourData}}">

yourData is not an array, it is an object. What you are trying to achieve is this:

<template repeat="{{data in yourData.employees}}">

I took the liberty of improving your element a bit. I hope you can learn from this, if you need further explanation feel free to ask.

<polymer-element name="custom-selector" attributes="host data">
<template>
    <core-ajax 
        id="employeesgetter"
        handleAs="json"
        url="dosql" 
        on-core-error="{{onError}}"
        response="{{data}}">
    </core-ajax>
    <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}">
        <paper-dropdown class="dropdown">
            <core-menu class="menu">
                <template repeat="{{employee in data.employees}}">
                    <paper-item name="{{employee.firstName}}">{{employee.firstName}}</paper-item>
                </template>
            </core-menu>
        </paper-dropdown>
    </paper-dropdown-menu>
</template>

<script>
    Polymer('custom-selector', {
        data: {
            employees: []
        },
        ready: function () { 
            console.log('firing ready');
            this.host = this.host || 'example.com'; 
            this.$.employeesgetter.go();
        },
        onError: function (e, resp) { 
            console.log('onError');
            console.log('error!: ' + resp.response);
        }
    });
</script>
</polymer-element>

Polymer dropdown data binding with AJAX response

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in DATA-BINDING

Related Questions in POLYMER

Trending Questions

Popular # Hahtags

Popular Questions