在Polymer报告组件​​中解析Java JSONObject

Question

我有一个Java类，它将我作为输出JSON对象。 e.g。

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

另一方面， 我用聚合物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>

我正在尝试将后端的JSON结果发送到前端。

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>