如何在jQuery中提取存储在数组中的对象属性并将它们放入另一个变量中

Question

我正在尝试从对象数组中提取对象属性并将它们存储在将添加到 HTML 对象的变量中。当我执行此操作时，当前正在发生什么，只是在没有图标变量的内容的情况下创建。在控制台中，它将图标记录为 [object object]。这是我的jsfiddle，这是我的代码。

var dHtml = "";

var fieldTypes = [ 
    {"label":"Text", "icon":"abc-icon", "cls":"text-class"},
    {"label":"Date", "icon":"calendar-icon", "cls":"date-class"},
    {"label":"Radio", "icon":"radio-icon", "cls":"radio-class"},
    {"label":"Checkbox", "icon":"checkbox-icon", "cls":"checkbox-class"},
    {"label":"Selector", "icon":"dropdown-icon", "cls":"selector-class"},
    {"label":"Telephone", "icon":"telephone-icon", "cls":"telephone-class"}
];

var icon = jQuery.each(fieldTypes, function(l,ll) {
    console.log(ll.icon);
});

for (i = 0; i < fieldTypes.length; i++) {

    dHtml += "<div style='padding-top:6px; padding-right:5px;' id='drag'><div id='" + icon + "'></div></div>";
};

jQuery('#pop').html(dHtml);

Answer 1

为什么要将它存储在单独的变量中。只需使用JQuery 迭代fieldTypes 并将字段icon 的值附加到dHtml。

$.each(fieldTypes, function(i, ll){
   dHtml += "<div style='padding-top:6px; padding-right:5px;' id='drag'><div id='" + ll.icon + "'></div></div>";
});

您可以通过其他方式创建一个数组icons 来存储所有图标的值，然后您可以使用它。

示例代码：

var icons = [];

$.each(fieldTypes, function(l,ll) {
    icons.push(ll.icon);
});

运行打印所有图标的示例代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

var dHtml = "";

var icons = [];

var fieldTypes = [ 
    {"label":"Text", "icon":"abc-icon", "cls":"text-class"},
    {"label":"Date", "icon":"calendar-icon", "cls":"date-class"},
    {"label":"Radio", "icon":"radio-icon", "cls":"radio-class"},
    {"label":"Checkbox", "icon":"checkbox-icon", "cls":"checkbox-class"},
    {"label":"Selector", "icon":"dropdown-icon", "cls":"selector-class"},
    {"label":"Telephone", "icon":"telephone-icon", "cls":"telephone-class"}
];

$.each(fieldTypes, function(l,ll) {
    icons.push(ll.icon);
});


$.each(icons, function(i, icon){
   dHtml += "<div style='padding-top:6px; padding-right:5px;' id='drag'><div id='" + icon + "'>"+icon+"</div></div>";
});

document.write(dHtml);
  
</script>

Answer 2

这是您的代码的略微重构版本，在我看来它更简洁：

var fieldTypes = [ 
    {"label":"Text", "icon":"abc-icon", "cls":"text-class"},
    {"label":"Date", "icon":"calendar-icon", "cls":"date-class"},
    {"label":"Radio", "icon":"radio-icon", "cls":"radio-class"},
    {"label":"Checkbox", "icon":"checkbox-icon", "cls":"checkbox-class"},
    {"label":"Selector", "icon":"dropdown-icon", "cls":"selector-class"},
    {"label":"Telephone", "icon":"telephone-icon", "cls":"telephone-class"}
];

$("#pop").empty();

$.each(fieldTypes, function(index, fieldType) {
    var innerDiv = $("<div>", { id: fieldType.icon });
    var outerDiv = $("<div>", { id: "drag", padding: "6px 5px 0 0" });
    $("#pop").append(outerDiv.append(innerDiv));
});