Updating a polymer element property with data from API call
<p>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. </p>

<p>Anyone know what I'm doing wrong here?</p>

<pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
&lt;link rel="import" href="address-input.html"&gt; 
&lt;link rel="import" href="package-list.html"&gt;
&lt;link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"&gt;

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


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


&lt;/template&gt;
&lt;/dom-module&gt;
&lt;script&gt;
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
    }
});
&lt;/script&gt;
</code></pre>

<p>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.</p>