Создать новый список в массиве, а затем суммировать их значения

Question

Моя команда работает над веб-приложением для отображения личных финансов. Мы бы хотели, чтобы пользователь добавил свои расходы в соответствующей категории (например, 50 долларов США на еду) и сделал эти записи. Затем мы хотим взять сумму, например, всех записей продуктов питания и отобразить ее. Поэтому нам нужно как-то получить эти списки в массивах - это то, что я думаю. И каким-то образом новые lis, которых еще нет, должны иметь какой-то особый идентификатор (?), Чтобы они «находили» друг друга (то есть все значения пищи попадают в массив пищи)? И есть ли способ сделать это с помощью React?

Я не уверен, как интегрировать React и как формировать массивы для суммирования значений (здесь «wert») позже.

Kategorie hinzufügen: добавить категорию
Zahlenwert hinzufügen: добавленная стоимость
раскрывающийся список: где вы можете выбрать категории
верт: куда вы вставляете потраченное значение
eingabeNum: вставленный номер
eingabeText: вставленный текст

function grab(event) {
    if (event.which === 13) {
        var eingabeNum = $("#wert").val();
        var eingabeText = $("#dropdown").val();
        if (eingabeNum == "" || eingabeText == "") {
            alert("Bitte alle spalten ausfüllen!");
        } else {
            $("#wert").val("");
            $("#dropdown").val("Kategorie");
            $("ul").append("<li><span class='trash'><i class='fa fa- 
                trash '></i></span> " + eingabeText + "<span 
                class = 'betrag' > " + eingabeNum + "€ < /span></li > ")
        }
    }
}

Answer 1

Не похоже, что вы используете React (вы добавляете новые элементы с помощью jQuery). Поэтому, если вы просто работаете с элементами DOM, вы можете включить класс CSS в каждый элемент <li class="food">..</li>. Тогда вы можете легко выбрать их $("li.food").

Вам также нужно значение элемента. Вы можете перейти от li к span, который содержит значение, и получить его оттуда, но он становится довольно грязным. Может быть, было бы лучше включить значение элемента в качестве атрибута HTML:

$("ul").append("<li class='food' itemValue='" + eingabeNum + "'><span class='trash'><i class='fa fa- 
            trash '></i></span> " + eingabeText + "<span 
            class = 'betrag' > " + eingabeNum + "€ < /span></li > ")

Тогда вы могли бы легко получить его от <li>.

let sum = 0;
$("li.food").each(function() {
    sum += $(this).attr("itemValue");
});
console.log("Sum of food items: " + sum);