Updating a polymer element property with data from

Question

I'm trying to update a property in a polymer element with data from an ajax api call. I have something similar working elsewhere in the app where users are able to add packages dynamically.

Anyone know what I'm doing wrong here?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="address-input.html"> 
<link rel="import" href="package-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="step-one">
<style>
</style>
<template>
    <section id="addresses">
        <div class="container">
            <div class="row">
                <h5>Addresses</h5>
                <address-input></address-input>
            </div>
        </div>
    </section>
    <section id="packages">
        <div class="container">
            <div class="row">
                <h5>Packages</h5>
                <package-list></package-list>
            </div>
        </div>
    </section>


    <section id="submit-shipping-info">
        <div class="container">
            <div class="row">
                <a class="waves-effect waves-light btn col s12 m12 l12" id="submit" on-click="submitInfo">Submit</a>
                <template is="dom-repeat" items="{{options}}">
                    <p>{{item.rates}}</p>
                </template>
            </div>
        </div>
    </section>


</template>
</dom-module>
<script>
Polymer ({
    is: 'step-one',
    properties: {
        options: {
            type: Object,
            notify: true,
            value: []   
        }   
    },
    submitInfo: function(e) {
        e.preventDefault();

        //add dimensions of all packages to the dimensions array
        var dimensions=[];
        $('#packages .package-card').each(function(){
            var weight= $(this).find('.weight').val();
            var length= $(this).find('.length').val();
            var height= $(this).find('.height').val();
            var width= $(this).find('.width').val();
            var dimension={width:width,length:length,height:height,weight:weight};
            dimensions.push(dimension);
        });

        //capture address data
        var from = $('#fromAddress').val();
        var to = $('#toAddress').val();

        //URL that processes getting a URL
        var getQuoteURL = '../v2/API/get_rates.php';
        var stuff = [];

        jQuery.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getQuoteURL,
            data:{
                from:from,
                to:to,
                dimension:dimensions
            }
        }).done(function(data){
            $.each(data['rates'], function(i, rate ) {
                stuff.push({carrier:rate.carrier});
                return stuff;
            });

            //show step two when ajax call completes
            $('.step-two').removeClass('hide').addClass('show');
            console.log(stuff);//I can see all objects I need to pass to the 'options' property
            return stuff;
        });
        this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
    }
});
</script>

I'm able to console.log the array i'm trying to use, but when I try to push it to the 'options' property, it won't update.

Answer 1

        return stuff;
    });
    this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value

should be return stuff;

    this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
   )};

otherwise

this.push('options',stuff);

is executed before data has arrived

Answer 2

Consider using Polymer built in methods instead of jQuery.

---

1. A button to submit a request.

<paper-button on-click="handleClick">Send a package</paper-button>

---

2. AJAX requests using <iron-ajax> element!

<iron-ajax id="SendPkg"
  url="my/api/url"
  method="POST"
  headers='{"Content-Type": "application/json"}'
  body={{packageDetails}}
  on-response="handleResponse">
</iron-ajax>

---

3. Handle the on-click event,

On click, select <iron-ajax> by ID and call <iron-ajax>'s generateRequest()

Use either data binding or Polymer's DOM API to get the package's width, height ...etc

handleClick: function() {
  this.packageDetails = {"width": this.pkgWidth, "height": this.pkgHeight };
  this.$.SendPkg.generateRequest();
},

---

4. Handle the response

handleResponse: function() {
  //Push data to options...
},

Answer 3

The solution ended up being to put this into a variable:

var self = this;

then in the ajax .done() replace the value of the object with the new object from the ajax call.

self.options = stuff;

I guess you have to put "this" into a variable before you can overwrite it's values. Then the other issue was that I was trying to use .push() to add to it, but really all I needed to do was replace it. (Using self.push('options',stuff); didn't seem to work as far as adding to an object)