Get data from server and use it in polymer element - ajax

Question

I would appreciate some help in something I'm trying to do with Polymer.
I have an element:
<dom-module id="internal-content">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
<style>
internal-menu{
width: 20%;
height: 100%;
}
internal-associates, internal-networks, internal-letter, internal-help{
width: 80%;
height: 100%;
}
</style>
<div class="horizontal center layout">
<internal-menu></internal-menu>
<internal-associates id="internal-associates" data="{{userData.associates}}"></internal-associates>
<internal-networks id="internal-networks" data="{{userData.socialNetworks}}" style="display: none"></internal-networks>
<internal-letter id="internal-letter" data="{{userData.farewellLetter}}" style="display: none"></internal-letter>
<internal-help id="internal-help" style="display: none"></internal-help>
</div>
<paper-toast-error id="errorInServer"
text="Ha habido un problema en servidor al acceder a sus datos. Por favor, vuelva a intentarlo. Si el error persiste póngase en contacto con nosotros
a través del email v.punzano#gmail.com">
</paper-toast-error>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'internal-content',
properties: {
userData: {
type: Object
}
},
ready: function(){
$.ajax({
type: "GET",
url: "/getUserData",
data: {firebaseID: document.querySelector('#firebaseLogin').user.uid},
error: function(xhr, ajaxOptions, thrownError){
document.querySelector('#errorInServer').openToast();
},
success: function(msg) {
this.userData = msg;
// return msg;
}
});
}
});
})();
What I want to do is render the elements internal-associates, internal-networks and internal-letter with the data retrieved in the ajax call, in order to use the dom-repeat templates inside this elements to render the arrays within the data.
The problem with the code I attach here is that the elements have been registered in the DOM before the data is retrieved.
I can attached or provide more information if needed.
Regards and thanks in advance.

Answer 1

There are several issues with your code:
Use iron-ajax instead of jquery: Whereas using external libraries is per se no issue, using iron-ajax can simplify your code a lot
As pointed out by #a1626 the this in your success handler is not the Polymer object you wish to use here
Your update code (this.userData = msg;) won't force Polymer to update the object. Use this.set('userData', msg); instead.
If you really have issues with your Subnodes hide them while you don't have any data. See https://www.polymer-project.org/1.0/docs/devguide/templates#dom-if