Javascript 聚合：呈现循环JSON_Javascript_Json_Polymer_Material Design

Javascript 聚合：呈现循环JSON

javascript json polymer

Javascript 聚合：呈现循环JSON,javascript,json,polymer,material-design,Javascript,Json,Polymer,Material Design,我已经看到了一些答案，但出于某种原因，我无法理解为什么这不起作用。我试图获取JSON数组的值，并将它们输出到模板中的自定义HTML元素中聚合物元素： HTML 页面上显示的似乎只是“测试”和空的我不知道这是否有用。但我会把它挂起来以防万一它会帮助别人。在聚合物1.0中：试验 [[h]] 聚合物({ id:“图形选项加载”，特性：{ 标题列表：{type:Array，value:（）=>{return[]}，notify:true} }, listChanged:函数（oldVa

我已经看到了一些答案，但出于某种原因，我无法理解为什么这不起作用。我试图获取JSON数组的值，并将它们输出到模板中的自定义HTML元素中

聚合物元素：

HTML

页面上显示的似乎只是“测试”和空的

我不知道这是否有用。但我会把它挂起来以防万一它会帮助别人。在聚合物1.0中：


试验

[[h]]

聚合物({
id:“图形选项加载”，
特性：{
标题列表：{type:Array，value:（）=>{return[]}，notify:true}
},
listChanged:函数（oldValue）{
console.log（this.headerList）；
//这是头；
}
});

这应该适合您。

如果

headerList

是您的JSON响应，那么

headerList.headers将是您需要绑定到的数组。当前，它看起来像是直接绑定到标题列表
（父对象）。没有什么可以重复的。通知Polymer
关于headerList
：Polymer（“图形选项加载”、{headerList:[……
（在create（）
回调中更好）或使用模板是自动绑定的“
。另外，应该对headerList.headers进行迭代。
：重复=”{{h in headerList.headers}“太棒了，就是这样-谢谢！
<polymer-element name="graph-optionsLoad">
    <template>
        <core-ajax auto url="/getDataHeaders"
               handleAs="json" response="{{headerList}}"></core-ajax>
        <div>TEST</div>
        <ul>
            <template repeat="{{h in headerList}}">
                <li> {{h}}</li>
            </template>
        </ul>

    </template>

    <script>
        Polymer( "graph-optionsLoad", { 
        headerListChanged: function(oldValue) {
            console.log(this.headerList);
            // this.headers;
            }
        });


    </script>
</polymer-element>

{
"headers": [
"MakeSpawnFish",
"MakeEndGame",
"MakeModeChange",
"MakeConnectComponent",
"MakeCircuitCreated",
"MakeStartGame",
"MakeSnapshot",
"MakeResetBoard",
"MakeAddComponent",
"MakeCaptureFish",
"MakeRemoveComponent",
"MakeDisconnectComponent"
]
}

<!DOCTYPE html>
<html>
    <head>
        <script src="/static/bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="/static/bower_components/my-elements/graph-optionsLoad.html">
        <link rel="import" href="/static/bower_components/core-ajax/core-ajax.html">

        <!-- <link rel="import" href="/static/greeting-tag.html"> -->
    </head>

    <body>
    <graph-optionsLoad></graph-optionsLoad>

    <script>

    </script>
    </body> 
</html>

<dom-module id="graph-optionsload">
    <template>
        <iron-ajax auto
               url="/getDataHeaders"
               handle-as="json"
               last-response="{{headerList}}"
               on-response="listChanged"></iron-ajax>
        <div>TEST</div>
        <ul>
            <template is="dom-repeat" items="[[headerList]]" as="[[h]]">
                <li>[[h]]</li>
            </template>
        </ul>
    </template>
    <script>
        Polymer({
            id: "graph-optionsload",
            properties: {
                headerList: {type: Array, value: ()=>{return []}, notify: true}
            },
            listChanged: function(oldValue) {
                console.log(this.headerList);
                // this.headers;
            }
        });
    </script>
</dom-module>