title: Reading and displaying json data using Polymer
body: <p>I am new to polymer and I am trying to read JSON data in a custom-element and display it in other element.</p>
  
  <p>This is my JSON data:</p>
  
  <p><strong><code>jsonData.json</code></strong></p>
  
  <pre><code>[
    {
      "name":"Ladies+Chrome+T-Shirt",
      "title":"Ladies Chrome T-Shirt"
    },
    {
      "name":"Ladies+Google+New+York+T-Shirt",
      "title":"Ladies Google New York T-Shirt"
    }
  ]
  </code></pre>
  
  <p>This is my <code>shop-app.html</code> file where I try to read data from JSON file (I am not sure if this is correct or not as I am not able to test it):</p>
  
  <pre><code>&lt;dom-module id="shop-category-data"&gt;
    &lt;script&gt;
      (function(){
        class ShopCategoryData extends Polymer.Element {
          static get is() { return 'shop-category-data'; }
          static get properties() { return {
            data: {
                type: Object,
                computed: '_computeData()',
                notify: true
            }
          }}
          _computeData() {
              this._getResource( {
                  url: 'data/jsonData.json',
                  onLoad(e){
                      this.set('data.items', JSON.parse(e.target.responseText));
                  }
              })
          }
          _getResource(rq) {
              let xhr = new XMLHttpRequest();
              xhr.addEventListener('load', rq.onLoad.bind(this));
              xhr.open('GET', rq.url);xhr.send();
            }
          }
        customElements.define(ShopCategoryData.is, ShopCategoryData);
      })();
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>This is the element where I want to display the data I read from the JSON file:</p>
  
  <pre><code>&lt;dom-module id="shop-app"&gt;
    &lt;template&gt;
      &lt;app-location route="{{route}}"&gt;&lt;/app-location&gt;
      &lt;app-route
          route="{{route}}"
          pattern="/:page"
          data="{{routeData}}"
          tail="{{subroute}}"&gt;
      &lt;/app-route&gt;
      &lt;shop-category-data data="{{data}}"&gt;&lt;/shop-category-data&gt;
      &lt;template&gt;
        &lt;div&gt; Employee list: &lt;/div&gt;
        &lt;template is="dom-repeat" items="{{data}}"&gt;
            &lt;div&gt;First name: &lt;span&gt;{{item.name}}&lt;/span&gt;&lt;/div&gt;
            &lt;div&gt;Last name: &lt;span&gt;{{item.title}}&lt;/span&gt;&lt;/div&gt;
      &lt;/template&gt;
    &lt;/template&gt;
    &lt;/template&gt;
    &lt;script&gt;
      class ShopApp extends Polymer.Element {
        static get is() { return 'shop-app'; }
      }
      customElements.define(ShopApp.is, ShopApp);
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>The line <code>&lt;shop-category-data data="{{data}}"&gt;&lt;/shop-category-data&gt;</code> should give me the data, which I then try to display using dom-repeat. But nothing is being displayed. So, I think there is some mistake in my reading the JSON data.</p>
  
  <p><strong>Edit</strong>:<br>
  The JSON is read correctly, it is just not getting reflected back in my:</p>
  
  <pre><code>&lt;shop-category-data data="{{data}}"&gt;&lt;/shop-category-data&gt;
  </code></pre>