Anyone knows how to convert the output from this code into an unordered list?
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});
The code above outputs for example like this:
{"costPerDay":"20","numberOfDays":"20","designCost":"40","cmsIntegration":"64","seoContentStrategy":"75"}
I was hoping if there's a way to make it output into an unordered list?
I'm not sure how your desired result is supposed to look like, but either way you can just iterate over your object:
// let obj = JSON.stringify($('form').serializeObject())
let obj = {"costPerDay":"20","numberOfDays":"20","designCost":"40","cmsIntegration":"64","seoContentStrategy":"75"};
$("#result").empty().append("<ul></ul>");
for (const entry in obj){
$("#result > ul").append(`<li>${entry}: ${obj[entry]}</li>`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"></div>
Or if you prefer a single-liner:
$("#result").empty().append(
"<ul>" + Object.entries(obj).map(e => `<li>${e[0]}: ${e[1]}`).join("") + "</ul>"
);
Working demo:
I guess the code you made does not work, maybe this will help you better figure out what i am aiming for, attached is the full code that I wanted the output as "Unordered List" and the source in CodePen http://jsfiddle.net/JOEHOELLER/217m94fk/2/ If you want to check out the working Range Slider. Thanks
function proRangeSlider(sliderid, outputid, colorclass) {
var x = document.getElementById(sliderid).value;
document.getElementById(outputid).innerHTML = x;
document.getElementById(sliderid).setAttribute('class', colorclass);
updateTotal();
}
var total = 0;
function updateTotal() {
var list= document.getElementsByClassName("range");
[].forEach.call(list, function(el) {
console.log(el.value);
total += parseInt(el.value);
});
document.getElementById("n_total").innerHTML = total;
}
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});