jQuery list of data

Question

I have a series of editable lists which, on a press of a button should be transformed into some sort of data structure. When it has been turned into some sort of data I need to add duplicates together.

Example:

• 200g banana
• 100g apple
• 200g apple

Should be turned into a data list of some sort and should in the end look like this:

• 200g banana
• 300g apple

Here's my attempt:

//button click event
$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient
    });
});

Basically I click the button and the above script finds all the relevant data.

How can I turn this into a multidimensional array or a list of objects I can search for duplicates in?

When I try to make a dynamic object it seems to fail and when I make a multidimensional array to search in I get blocked by inArray's inability to search through them.

Problem recap: I am able to get the user data no problem. Turning it into a list and adding together duplicates is the problem.

Answer 1

I will suggest you to have a global object that will contain the summary, this will look like this:

$(".calculate").bind("click", function(e)
{
    var fruits = {};

    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // here is my code
        if(fruits[opt2] == undefined) {
            fruits[opt2] = opt1;
        } else {
            // assuming that opt1 is an integer
            fruits[opt2] += opt1;
        }
    });

    // use fruits variable here
});

Answer 2

Here's another variant, which also does some simple parsing in case you have 100g as input, versus 100. Also, the data structure gets reinitialized every time, so everything does not get doubled on every click.

$(".calculate").bind("click", function(e)
{
    //get the correct parent of the button
    var parent = $(this).closest("#calc");

    var ingredients = {};

    var extractWeight = function (input) {
        // you can add other logic here
        // to parse stuff like "1kg" or "3mg"

        // this assumes that everything is
        // in grams and returns just the numeric
        // value
        return parseInt(input.substring(0, input.length - 1));
    }

    //get relevant data
    parent.find(".options").each(function(index, element)
    {
        var opt1 = $(this).children(".opt1").children("input").val(); //weight
        var opt2 = $(this).children(".opt2").children("input").val(); //ingredient

        // initialize to 0 if not already initialized
        ingredients[opt2] = ingredients[opt2] ? ingredients[opt2] : 0;
        ingredients[opt2] += extractWeight(opt1);
    });
});​

Here are some tips:

• {} is called an object literal and is used to create a new empty object
• object members can be accessed dynamically through the [] notation (i.e. if x === "name" then o[x] === o.name)
• variables are visible inside functions that are at the same level or deeper in the scope - like in my example I use ingredients in the each function.
• arrays in JavaScript only support numeric keys, so you won't have stuff like PHP's "associative arrays". Objects fill this gap in JS.

Answer 3

Here is a jsFiddle that does what you're looking for :) http://jsfiddle.net/LD9TY/

It has two inputs, one for the item name and the other for the amount. When you click add, it checks an object to see if the item was already added. If so, it increments the amount for that item based on your input. If not, it adds that item with the amount you specified. It then goes and builds a ul with all the items in your "store".

Note that this is a quick and dirty example, so there is no type checking or validation going on :)