JavaScript：将对象绑定到 DOM 元素答案

【问题标题】：JavaScript: Binding object to DOM elementJavaScript：将对象绑定到 DOM 元素
【发布时间】：2012-12-12 09:43:23
【问题描述】：

我正在返回一个对象，我希望它能够循环并通过类或 ID 将其内容绑定到 DOM 对象。

是否有推荐的方法来执行此操作而无需手动分配每个元素？

最好的情况是一个函数，它会实际创建一个包含数据的元素。

...否则我只能手动创建和分配所有数据，而且还有很多。

{
    "user_profile": {
        "user_meta_first_name": "asdasd",
        "user_meta_last_name": "asdasd",
        "user_meta_billing_first_name": "asdasd",
        "user_meta_billing_last_name": "asdasd",
        "user_meta_billing_address_1": "2589 asdasd Rd.",
        "user_meta_billing_address_2": "",
        "user_meta_billing_city": "asdsdasd",
        "user_meta_billing_postcode": "VVV 344",
        "user_meta_billing_country": "CA",
        "user_meta_billing_state": "AB",
        "user_meta_billing_email": "admin@thebandagency.ca",
        "user_meta_billing_phone": "2343423434",
        "user_meta_shipping_first_name": "asdasd",
        "user_meta_shipping_last_name": "asdasd",
        "user_meta_shipping_address_1": "2589 asdasd Rd.",
        "user_meta_shipping_address_2": "",
        "user_meta_shipping_city": "asdasd",
        "user_meta_shipping_postcode": "VVV 344",
        "user_meta_shipping_country": "CA",
        "user_meta_shipping_state": "AB",
        "user_meta_shipping_email": "",
        "user_meta_shipping_phone": "",
        "user_meta_paying_customer": "1"
    },
    "pet_profiles": {
        "2000": {
            "pet_name": "Wally the Wonder Pup",
            "pet_tag_serial": "V140000",
            "pet_tag_pin": "XGZSVEMZ",
            "pet_tag_expiry": "December 8, 2013",
            "pet_tag_active": "1",
            "pet_tag_size": "1",
            "pet_tag_design": "Basket Case"
        }
    }
}

【问题讨论】：

你能用 foreach 函数循环你的对象吗？它是一个 JSON 对象吗？
我们可以看一点代码或示例吗？
使用$(element).data('obj', myobj)有什么问题？
没什么 Jack ... 只是想确保我以更推荐的方式进行操作。您建议如何实施？
@dcolumbus 使用.data()，您几乎可以将任何想要的对象附加到 DOM 节点。

标签： javascript jquery dom data-binding bind

【解决方案1】：

我假设你的对象是一个数组。您可以使用each JQuery 函数循环遍历您的对象，然后创建一个包含您的对象数据的元素。

$.each(map, function(key, value) { 
  $('#mainContainer').append('<div id="'+key+'">'+value+'</div>');
});

【讨论】：

【解决方案2】：

如果这只是 jsonData，而你想把它全部显示在屏幕上，你可以使用这种递归的方式。我建议对其进行编辑，因为它非常简单。 http://pastebin.com/EzTZHJxW

(function () {
     var jsonData = dataSentFromServer();
     var detailsElement = document.getElementById("Details");
     function newDiv(txt) {
         var createDiv = document.createElement("div");
         if (txt != undefined)
             createDiv.innerHTML = txt;
         return createDiv;
     }

     var depth = 1;
     (function ComposeGraph(obj, el) {
         var ElementArray = [];
         var ChildArray = [];
         $.each(obj, function (name, value) {
             if (!$.isArray(value)) {

                 var appender = newDiv(name + " __:__ " + value);
                 appender.setAttribute("style", "margin-left:" + 10 * depth + "px;");
                 if ($.isPlainObject(value)) {
                     appender.innerHTML = "<b>" + appender.innerHTML + "</b>";
                     depth++;
                     ComposeGraph(value, appender);
                     depth--;
                     ElementArray.push(el);
                     ChildArray.push(appender);
                 } else {
                     el.appendChild(appender);
                 }
             } else {
                 var appender = newDiv(name + " __:__ " + value);
                 appender.setAttribute("style", "margin-left:" + 10 * depth + "px;");
                 appender.innerHTML = "<b>" + appender.innerHTML + "</b>";
                 for (var i = 0, len = value.length; i < len; i++) {
                     depth++;
                     ComposeGraph(value[i], appender);
                     depth--;
                 }
                 ElementArray.push(el);
                 ChildArray.push(appender);
             }
         });
         for (var i = 0, len = ElementArray.length; i < len; i++) {
             ElementArray[i].appendChild(ChildArray[i]);
         }
     })(jsonData, detailsElement);
 })();

【讨论】：