Question

I have some input fields than I want as an array so that I can view them in a table on my page. I have been able to create an array using .serializeArray()

In this fiddle I have been able to output my array however I want the data to appear as it does in the table I have hard coded at the bottom of the fiddle, where it groups all the instances of Tom and Jerry into one row per id. Accumalating all sales values for that id etc. And I want to sort it by the total sale price column. I am aware of server side techniques to do this however in this case I am looking for a jquery solution. What is the best way to acheive this?

Answer 1

I’m assuming you can rely on the hidden input fields always appearing in groups of four with an id[], name[], sales[] & price[] for each group, otherwise (obviously) you can’t tell which fields are related. So rather than use .serializeArray(), which returns a single array with all the values, I’d put the ids in their own array, the names in their own, and so forth. Perhaps something like this:

function showValues() {
    function getVal(el, i) {
        return el.value;
    }
    var ids = $.map($('input[name="id[]"]'), getVal),
        names = $.map($('input[name="name[]"]'), getVal),
        sales = $.map($('input[name="sales[]"]'), getVal),
        prices = $.map($('input[name="price[]"]'), getVal),
        data = {},
        i,
        $results = $("#results");

    for (i = 0; i < ids.length; i++) {
        if (!data[ids[i]]) {
            // if current id is new add a record for it:
            data[ids[i]] = {
                "id":ids[i],"name":names[i],"sales":+sales[i],"price":+prices[i]
            };
        } else {
            // otherwise add to existing record's totals
            data[ids[i]].sales += +sales[i];
            data[ids[i]].price += +prices[i];
        }
    }
    // data object now contains the details for each salesman,
    // so turn it into an array to allow sorting:
    data = $.map(data, function(val, key) { return val; });
    data.sort(function(a,b) { return a.price - b.price; });

    // now output table - assume there's already a table element with headings
    $.each(data, function(i, val) {
        var $tr = $("<tr></tr>").attr("data-id", val.id).appendTo($results);
        $("<td></td>").text(val.name).appendTo($tr);
        $("<td></td>").text(val.sales).appendTo($tr);
        $("<td></td>").text(val.price).appendTo($tr);
        $("<td></td>").text(val.price / 10).appendTo($tr);
    });
}

Working demo: http://jsfiddle.net/nnnnnn/VNSam/5/

By way of explanation, this line:

ids = $.map($('input[name="id[]"]'), getVal)

…says to get all inputs with name="id[]", and pass the resulting jQuery object to the $.map() method so that we can get back an array containing just the id values – you can see that getVal() is just a simple function that does exactly that. I do the same thing for name[] and the other fields.

Note also that the sales and price values are strings when retrieved from the inputs, so I’m using the unary plus operator to convert them to numbers.