Question

我现在正在努力将一组div插入Polymer中的纸质阴影内的核心标题面板中。我从JSON数组中获取一组值，我需要为每个值创建一个包含HTML内容（最终为复选框）的div。这是相关的代码片段：

<paper-shadow class="card upload-options-box" z="1">
    <core-header-panel flex id="graphHeaderList">
        <core-toolbar class="upload-option-header">
            <span flex>Variable</span>
        </core-toolbar>
        <core-label horizontal layout> // this is all just an example of what I eventually want to insert
            <paper-checkbox for></paper-checkbox>
            <div vertical layout>
                <h4>MakeCircuitCreated</h4>
            </div>
        </core-label> // end of example of insert
    </core-header-panel>
</paper-shadow>

和JQuery：

function addHeaders(){
    $.getJSON('http://myURL/getDataHeaders', function(data) {
        var headerArray = [];
            $.each(data, function(key, val) {
                $('#graphHeaderList').append("<div id='" +val +"'></div>");
                console.log(val);
                headerArray.push(val)
            });
            console.log(headerArray);
        });
    }
        window.onload = addHeaders; //grabs the header values when the page is loaded

我的JSON：

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

Answer 1

在我看来你的$ .each正在调用错误的东西。

在您的json文件中，您有一个名为headers的密钥。当你的每个函数迭代时，它会得到1个密钥并将它的成员（这是一个数组）添加到div中。我测试了它并且每个成员都有一个div作为它的id！

因此，您可能需要在内部数组

上嵌套第二个要调用的函数

$.each(data, function(key, val) {
    $.each(val, function(index,value){
        $('#graphHeaderList').append("<div id=" + "'" + value + "'"  + "></div>");
          console.log(value);
          headerArray.push(value);
    }
);

https://api.jquery.com/jquery.each/

Answer 2

您的代码：

$('#graphHeaderList').append("<div id='" +val +"'></div>");

无法工作，因为jQuery无法在其范围内找到该元素。但是，聚合物通过其automatic node finding功能自动创建id元素引用：

this.$.graphHeaderList

因此，如果您使用：

，它应该按预期工作

$(this.$.graphHeaderList).append("<div id='" +val +"'></div>");

将元素从Polymer中的JSON数组添加到DIV

2 个答案: