I'm returning an object that I'd love to be able to just loop over and bind it's contents to a DOM object by way of class or ID.
Is there a recommended way to do this without having to manually assign each element?
Best case scenarios is a function that will actually create an element with the data inside of it.
...otherwise I'm stuck manually creating and assigning all of the data, and there's a lot.
{
"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"
}
}
}
I assume that your object is an array. You could use each
JQuery function to loop through your object, then create an element with your object data inside of it.
$.each(map, function(key, value) {
$('#mainContainer').append('<div id="'+key+'">'+value+'</div>');
});
If this is just jsonData, and you want to display it all on the screen, you can use this recursive approach. I would suggest editing it, as it is pretty bare bones. 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);
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.