如何提取存储在 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));
});

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

How to extract object properties that are stored in an array in jQuery and place them into another variable

arrays

jquery

properties

insert

object