Polymer - <iron-ajax> data binding

Question

I have created a polymer element and inside the element I am fetching a small little .json file that I will need to use for various parameters.

My JSON file looks like this.

 {
  "server_name" : "XMS Development Site",
  "server_url" : "test0",
  "xms_version" : "3.0.0 BETA",
  "rest": {
     "os_url" : "test1",
     "mbo_url": "test2",
     "login_url": "test3",
     "logout_url": "test4",
  }
}

I am unable to access the values in this JSON object from my iron-ajax request. The {{response.xms_version}}binding just appears blank. The on-response function just displays null. Looking in chrome's dev tools, the JSON file is retrieved and the data is all there. It seems that for some reason I am just unable to bind to it. I am not trying to use the dom-repeat method as I just need to be able to bind to these data points.

My element looks like this:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="xms-login">


  <template>
    <style>
      :host {
        display: block;
      }
      .login-form-button{
        padding: 16px;
        text-align: center;
      }
      .login-form{

      }
      .login-field{
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;

      }
      .login-button{
        background-color: var(--default-primary-color);
        color: var(--text-primary-color);
      }
      .xms-logo-svg{
        text-align: center;
        padding-top: 64px;

      }
      .version-number-text{
        text-align: center;
        postion: absolute;
        bottom: 0;
      }

    </style>

    <iron-ajax id="testAjax" auto
      url="../../xms.json"
      handle-as="json"
      method="GET"
      on-response="handleResponse"
      last-response="{{response}}"></iron-ajax>

    <xms-auth id="xmsAuthHandler" authheader="{{computeEncodedLogin(username, password)}}" provider="rest"></xms-auth>

    <div class="login-form">
      <div class="login-form-fields">
        <paper-input class="login-field" type="text" label="Username" value="{{username}}"></paper-input>
        <paper-input class="login-field" type="password" label="Password" value="{{password}}"></paper-input>
      </div>
      <div class="login-form-button">
        <paper-button raised class="login-button" onclick="xmsAuthHandler.login()">Login</paper-button>
      </div>
      <div class="version-number-text">{{response.xms_version}}</div>
    </div>




  </template>
  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'xms-login',

      properties: {

        user: {
          type: String,
          notify: true
        },

        username: {
          type: String,
          notify: true
        },

        password: {
          type: String,
          notify: true
        },
      },

               computeEncodedLogin: function( username, password ){
        return btoa(username + ':' + password);
      },


      handleResponse: function(request){
        var myResponse = request.detail.response;
        console.log(myResponse);
      }
    });
  })();
  </script>
</dom-module>

Answer 1

Issue is fixed, was caused by incorrect JSON data.