我正在返回一个我喜欢能够循环并通过类或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"
}
}
}
答案 0 :(得分:0)
我假设你的对象是一个数组。您可以使用each
JQuery函数循环遍历对象,然后在其中创建包含对象数据的元素。
$.each(map, function(key, value) {
$('#mainContainer').append('<div id="'+key+'">'+value+'</div>');
});
答案 1 :(得分:0)
如果这只是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);
})();