How to Convert serializedObject to UL (unordered list)?-CodePudding

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?

CodePudding user response：

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").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").append(
    "<ul>"   Object.entries(obj).map(e => `<li>${e[0]}: ${e[1]}`).join("")   "</ul>"
);

CodePudding user response：

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;
    });
});