使用Polymer读取和显示json数据

我是polymer的新手，我正在尝试在自定义元素中读取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文件中读取数据（我不确定这是否正确，因为我无法测试它）：

（功能（）{
类ShopCategoryData扩展了Polymer.Element{
静态get是（）{return'shop category data'；}
静态获取属性（）{return{
数据：{
类型：对象，
计算：''u computeData（）'，
通知：正确
}
}}
_计算数据（）{
这是.\u获取资源（{
url:'data/jsonData.json'，
空载（e）{
set（'data.items'，JSON.parse（e.target.responseText））；
}
})
}
_获取资源（rq）{
设xhr=newXMLHttpRequest（）；
xhr.addEventListener（'load'，rq.onLoad.bind（this））；
open（'GET'，rq.url）；xhr.send（）；
}
}
customElements.define（ShopCategoryData.is，ShopCategoryData）；
})();

这是我想要显示从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>

员工名单：
名字：{{item.name}
姓氏：{{item.title}
ShopApp类扩展了Polymer.Element{
静态get是（）{return'shop app'；}
}
customElements.define（ShopApp.is，ShopApp）；

行

应该给我数据，然后我尝试使用dom repeat显示数据。但是什么也没有展示出来。因此，我认为在读取JSON数据时存在一些错误

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

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

---

由于json被分配给了

数据项，而不是
数据本身，所以它不会被反射回来

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

建议使用
和报废
。e、 g.更换以下管路

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



与

计算属性未返回值。如果要将
数据定义为计算属性，则必须从计算属性函数
\u computeData（）
返回一个值。但在您的例子中，您使用的是异步
XMLHttpRequest
。因此，如果在调用
this.\u getResource…
后返回一个值，则需要使其同步（，没有人推荐它）

同步方法的Plnkr：

另一种方法是调用
ready（）
中的方法。这是异步的

Plnkr:
您首先获取JSON数据吗？您是否使用JSON.stringify解析JSON数据？您是否尝试使用ready:function（）{}而不是computer（）获取JSON？@RickardElimä请检查我的编辑。json被正确解析，我通过使用console.log显示来检查它。只是没有得到反映。
<shop-category-data data="{{data}}"></shop-category-data>

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