JavaScript:将对象绑定(bind)到 DOM 元素

Question

我正在返回一个对象，我希望能够循环并通过类或 ID 将其内容绑定(bind)到 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"
        }
    }
}

Answer 1

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

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