使用 Polymer 读取和显示 json 数据

Question

我是聚合物的新手，我正在尝试读取自定义元素中的 JSON 数据并将其显示在其他元素中。

这是我的JSON数据：

jsonData.json

[
  {
    "name":"Ladies+Chrome+T-Shirt",
    "title":"Ladies Chrome T-Shirt"
  },
  {
    "name":"Ladies+Google+New+York+T-Shirt",
    "title":"Ladies Google New York T-Shirt"
  }
]

这是我的 shop-app.html 文件，我尝试从 JSON 文件中读取数据（我不确定这是否正确，因为我无法测试它）：

<dom-module id="shop-category-data">
  <script>
    (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);
    })();
  </script>
</dom-module>

这是我要显示从 JSON 文件中读取的数据的元素：

<dom-module id="shop-app">
  <template>
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>
    <shop-category-data data="{{data}}"></shop-category-data>
    <template>
      <div> Employee list: </div>
      <template is="dom-repeat" items="{{data}}">
          <div>First name: <span>{{item.name}}</span></div>
          <div>Last name: <span>{{item.title}}</span></div>
    </template>
  </template>
  </template>
  <script>
    class ShopApp extends Polymer.Element {
      static get is() { return 'shop-app'; }
    }
    customElements.define(ShopApp.is, ShopApp);
  </script>
</dom-module>

行 <shop-category-data data="{{data}}"></shop-category-data> 应该给我数据，然后我尝试使用 dom-repeat 显示这些数据。但是没有显示任何内容。所以，我认为我在读取 JSON 数据时有一些错误。

编辑:
JSON 被正确读取，只是没有反映在我的:

中

<shop-category-data data="{{data}}"></shop-category-data>

Answer 1

它没有得到反映，因为 json 分配给了 data.items，而不是 data 本身。

this.set('data', JSON.parse(e.target.responseText));

推荐使用<iron-ajax>，废弃<shop-category-data>。例如替换以下行

<shop-category-data data="{{data}}"></shop-category-data>

和

<iron-ajax auto url="data/jsonData.json" handle-as="json"
    last-response="{{data}}"></iron-ajax>

Answer 2

计算属性不是 returning 值。如果要将 data 定义为计算属性，则必须 return 来自计算属性函数 _computeData() 的值。但在您的情况下，您使用的是异步 XMLHttpRequest。因此，如果您在调用 this._getResource... 后 return 一个值，则需要使其同步（ 没有人推荐 ）。

Plnkr 同步方法：http://plnkr.co/edit/jdSRMR?p=preview

另一种方式是调用ready()里面的方法。这是异步的。

Plnkr：http://plnkr.co/edit/pj4dgl?p=preview

使用 Polymer 读取和显示 json 数据

Reading and displaying json data using Polymer

html

json

polymer

polymer-2.x