使用聚合物阅读和显示json数据

我是聚合物新手，我正在尝试读取自定义元素中的JSON数据并将其显示在其他元素中。使用聚合物阅读和显示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>

这是我想要显示数据的元素I rea从JSON文件d：

<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重复显示。但没有任何显示。所以，我认为在阅读JSON数据时存在一些错误。

编辑：
的JSON被正确读取，它只是没有得到在反射回我：

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

来源

2017-07-30 Joker

您是否首先获得了JSON数据？ –

你用JSON.stringify解析了JSON数据吗？ –

您是否尝试过使用ready：function（）{}来获取JSON而不是计算机（）？ –

计算属性没有返回的值。如果要将data定义为计算属性，则必须从计算属性函数_computeData()返回一个值。但在你的情况下，你正在使用异步XMLHttpRequest。因此，如果您在拨打this._getResource...后返回一个值，则需要使其同步（，其中没有人建议）。

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

的另一种方法是调用内部ready()的方法。这是异步的。

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

来源

2017-08-02 00:11:14 Ofisora

为什么不尝试使用iron-ajax，你的代码会更加干净和精益您将直接将数据暴露给数据绑定，以便您可以将其与其他元素一起使用。

<iron-ajax 
auto 
url="https://www.googleapis.com/youtube/v3/search" 
params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}' 
handle-as="json" 
on-response="handleResponse" 
debounce-duration="300"></iron-ajax>

来源

2017-08-01 21:15:06

它，因为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>

来源

2017-08-01 22:38:45

使用聚合物阅读和显示json数据

回答

相关问题