Polymerレポートコンポーネントで解析されたJava JSONObject

Question

出力JSONオブジェクトとして私に提供されるJavaクラスがあります。例： 他の側では

{"date":"20170220","action":"run","eat":"banana","sleep":"20170315152644"}... 

、 私は、バックエンドからJSON結果を送信しようとしていますポリマー1

 <table> 
      <caption>Actions</caption> 

      <thead> 
      <tr>      
       <th scope="col">date</th> 
       <th scope="col">action</th> 
       <th scope="col">eat</th> 
       <th scope="col">sleep</th> 
      </tr> 
      </thead> 
      <tbody> 
       <td>{{}}</td> 
       <td>{{}}</td> 
       <td>{{}}</td> 
       <td>{{}}</td> 
      </tbody> 
    </table> 
</my-table> 

でフロントエンドを作成しましたフロントエンドに。

Answer 1

こんにちは、iron-ajaxというコンポーネントが必要な場合は、あなたのためにajaxコールを作成します。結果が得られたら、dom-repeatを使用してテーブル行をレンダリングするか、vaadin-gridのようなテーブルの定義済みコンポーネントを使用します。

JSON出力が配列であると仮定します。

[ 
    {"date":"20170220","action":"run","eat":"banana","sleep":"20170315152644"}, 
    ... 
] 

フロントエンドは次のようになります。

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

     <table> 
      <caption>Actions</caption> 
      <thead> 
       <tr> 
        <th scope="col">date</th> 
        <th scope="col">action</th> 
        <th scope="col">eat</th> 
        <th scope="col">sleep</th> 
       </tr> 
      </thead> 
      <tbody> 
       <template is="dom-repeat" items="[[data]]"> 
        <tr> 
         <td>[[item.date]]</td> 
         <td>[[item.action]]</td> 
         <td>[[item.eat]]</td> 
         <td>[[item.sleep]]</td> 
        </tr> 
       </template> 
      </tbody> 
     </table> 
    </template> 
    <script> 
     // omitted... 
    </script> 
</my-table>