Список данных jQuery

У меня есть ряд редактируемых списков, которые при нажатии кнопки должны быть преобразованы в какую-то структуру данных. Когда он был превращен в какие-то данные, мне нужно добавить дубликаты вместе.

Пример:

200 г банана
100 г яблока
200 г яблока

Должен быть преобразован в какой-то список данных и должен в конце выглядеть следующим образом:

200 г банана
300 г яблока

Здесь моя попытка:

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

В основном я нажимаю кнопку, а выше script находит все соответствующие данные.

Как я могу превратить это в многомерный массив или список объектов, в которых я могу искать дубликаты?

Когда я пытаюсь создать динамический объект, он, кажется, терпит неудачу, и когда я делаю многомерный массив для поиска, я блокируюсь из-за невозможности поиска inArray для их поиска.

Проблема: Я могу получить данные пользователя без проблем. Включение его в список и добавление дубликатов - проблема.

Ответ 1

Я предлагаю вам иметь глобальный объект, который будет содержать сводку, это будет выглядеть так:

$(".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
});

Ответ 2

Вот еще один вариант, который также выполняет простой синтаксический анализ, если у вас есть 100g как входной, а не 100. Кроме того, структура данных каждый раз переучивается, поэтому каждый раз не получается удваиваться.

$(".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);
    });
});

Вот несколько советов:

{} называется литералом объекта и используется для создания нового пустого объекта
Доступ к объектам возможен динамически через ноту [] (т.е. если x === "name" then o[x] === o.name)
переменные видны внутри функций, которые находятся на одном уровне или глубже в области - как в моем примере я использую ingredients в функции each.
массивы в JavaScript поддерживают только числовые ключи, поэтому у вас не будет таких вещей, как "ассоциативные массивы" PHP. Объекты заполняют этот пробел в JS.

Ответ 3

Вот jsFiddle, который делает то, что вы ищете:) http://jsfiddle.net/LD9TY/

Он имеет два входа, один для названия элемента, а другой для суммы. Когда вы нажимаете кнопку "Добавить", он проверяет объект, чтобы увидеть, был ли элемент уже добавлен. Если это так, он увеличивает сумму для этого элемента на основе вашего ввода. Если нет, он добавляет этот элемент с указанной вами суммой. Затем он идет и строит ul со всеми элементами в вашем "магазине".

Обратите внимание, что это быстрый и грязный пример, поэтому проверка или проверка типа не происходит:)