How to mutate Polymer v1.x property inside ajax request

I'm trying to populate an array based in the results that I fetch from an Ajax request via iron-ajax When I try to Access to my property, my watch window displays "not available"

Below is an little example I recreated for explain my issue:

my-component.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">


<dom-module id="my-component">
    <template>
        <div>
            <paper-dropdown-menu
                    id="location" label="Ubicaci&oacute;n"
                    value="{{vehicle.location}}">
            </paper-dropdown-menu>
            <paper-dropdown-menu id="city" label="Ciudad">
                <paper-menu
                        class="dropdown-content"
                        selected="{{city.city_code}}"
                        attr-for-selected="value"
                        on-iron-select="estadoSeleccionado">
                    <template id="" is="dom-repeat" items="[[opcionesDisponibilidad]]" as="i">
                        <paper-item value="[[i.valor]]">[[i.texto]]</paper-item>
                    </template>
                </paper-menu>
            </paper-dropdown-menu>
        </div>
        <iron-ajax
                id="ajax"
                method="GET"
                url="http://localhost:8080/ws.asmx"
                params=""
                content-type="application/x-www-form-urlencoded; charset=UTF-8"
                handle-as="text"
                on-response="handlecities"
                debounce-duration="300">
        </iron-ajax>
        <app-localstorage-document id="localStorageElement" key="myapp.login_data" data="{{loginInfo}}"></app-localstorage-document>
    </template>
    <script>
        Polymer({
            is: "my-component",
            properties:{
                vehicle: {
                    type: Object,
                    value:{
                        id: "",
                        plate: "",
                        location: ""
                    }
                },
                cities:{
                    notify: true,
                    type: Array,
                    value: [{city_code:'0', city_name:'-'}]
                }
            },
            ready:function () {
                this.querycities();
            },
            querycities: function () {
                if (this.$.localStorageElement.storage['myapp.login_data']){
                    this.$.loginInfo = JSON.parse(this.$.localStorageElement.storage['myapp.login_data']);
                } else return false;
                this.$.ajax.url = this.$.ajax.url + "/listadoCiudades";
                this.$.ajax.verbose = true;
                this.$.ajax._boundHandleResponse = this.handlecities;
                this.$.ajax.params = {dispositivo:'12345', credencial: this.$.loginInfo.cred};
                this.$.ajax.generateRequest();
            },
            handlecities: function (request) {
                console.log(request.response);
                var xPath = new SoftXpath();
                xPath.registerNamespace("","");
                xPath.loadXML(request.response);
                var cities = xPath.selectNodes("//Ciudad//*[self::Codigo|self::Nombre]");
                var xPathElement = new SoftXpath();
                if (cities){
                    for(var i = 1; i < cities.length;i++){
                        var c = new Object();
                        c.Codigo = cities[i-1].text;
                        c.Nombre = cities[ i ].text;

                        this.$.cities.push(c);// <---- Here I have not access to my polymer property ' cities '.

                        //How to update my polymer var cities ??
                        //Tried also with:
                        // this.cities --> undefined
                        // this.$$('#myassignedId').cities  --> undefined
                    }
                }
            }
        })
    </script>
</dom-module>

Open in new window


How can I populate my 'cities' property if appears out of scope ?
Seems as when the flow passes thought iron-ajax, the main properties are lost
rdflocAsked:
Who is Participating?
 
rdflocAuthor Commented:
Well,
After too many try-error variations, finally I found the cause of error.

Line 65: this.$.ajax._boundHandleResponse = this.handlecities;
Removed that line and all my polymer attributes returned to normality.

I was using that sentence because I was trying to reuse the component for several ajax requests. 'handlecities' is specified as attribute as well, so is redundant (only when there are no intentions of reuse). I still don´t know how to reuse the component defining a custom handler, but for some reason if i use the above sentence, all polymer properties are lost.

So, in the meantime I´m defining several ajax components one for each ajax request.
0
 
leakim971PluritechnicianCommented:
0
 
rdflocAuthor Commented:
yes.. I tried. But as stated in my post, at that point "this.cities" is undefined so "this.cities.push(c);" produces an error.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
leakim971PluritechnicianCommented:
I don't like your line 74 and so on...
could you change the name of this variable?

 
              var __cities = xPath.selectNodes("//Ciudad//*[self::Codigo|self::Nombre]");
                var xPathElement = new SoftXpath();
                if (__cities){
                    for(var i = 1; i < __cities.length;i++){
                        var c = new Object();
                        c.Codigo = __cities[i-1].text;
                        c.Nombre = __cities[ i ].text;

                        this.cities.push(c);// <---- Here I have not access to my polymer property ' cities '.

Open in new window

0
 
rdflocAuthor Commented:
Changed as suggested. But no luck.

handlecities: function (request) {
                console.log(request.response);
                var xPath = new SoftXpath();
                xPath.registerNamespace("","");
                xPath.loadXML(request.response);
                var __cities  = xPath.selectNodes("//Ciudad//*[self::Codigo|self::Nombre]");
                var xPathElement = new SoftXpath();
                if (__cities){
                    for(var i = 1; i < cities.length;i++){
                        var c = {};
                        c.Codigo = __cities[i-1].text;
                        c.Nombre = __cities[i].text;
                        this.cities.push(c);
                    }
                }
            },

Open in new window

Still an error in my console:

ReferenceError: cities is not defined
0
 
leakim971PluritechnicianCommented:
could you share a page to see that ?
0
 
rdflocAuthor Commented:
Hmm. Impossible at this moment, as the target will be a Hybrid application mounted in mobile device. I´m  doing my initial development in localhost.
0
 
leakim971PluritechnicianCommented:
Could you be sure your cache is cleared :)
0
 
leakim971PluritechnicianCommented:
so let say if not defined yet.
do it :

if(!this.cities)
   this.cities = [];
this.cities.push(c);

Open in new window

0
 
leakim971PluritechnicianCommented:
no more news ? If you check documentation, you see only :
this.cities = foo;

no example like :
this.cities.plush(foo);
0
 
rdflocAuthor Commented:
I found the solution by myself after too many try error variations.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.