Как посчитать сумму за день?

Question

[pesice4389]

Подскажите, как посчитать общую сумму за каждый день

var dailyBalance = 0.00;
$.ajax({
    url: '../list.php',
    type: "GET",
    dataType: "json",
    success: function(json) {
        if (typeof(json.response) == 'object') {
            const _account = json.response.items.reduce((acc, cur, i, a) => {
                const index = acc.findIndex(item => item.date === cur.date)
                if (index !== -1) {

                    if (cur.type == 1) {
                        dailyBalance = dailyBalance + Number(cur.amount);
                    } else {
                        dailyBalance = dailyBalance - Number(cur.amount);
                    }

                    acc[index].accounts.push({
                        account: cur.account,
                        time: cur.time,
                        category: cur.category,
                        comment: cur.comment,
                        types: cur.type_html,
                        amount: cur.amount_html,
                        balance: cur.balance,

                        dailyBalance2: dailyBalance
                    })
                } else { //new day and first
                    dailyBalance = 0.00;
                    if (cur.type == 1) {
                        dailyBalance = dailyBalance + Number(cur.amount);
                    } else {
                        dailyBalance = dailyBalance - Number(cur.amount);
                    }

                    cur.accounts = []
                    cur.accounts.push({
                        account: cur.account,
                        time: cur.time,
                        category: cur.category,
                        comment: cur.comment,
                        types: cur.type_html,
                        amount: cur.amount_html,
                        balance: cur.balance,

                        dailyBalance2: dailyBalance
                    })
                    acc.push(cur)
                }
                return acc
            }, [])
            $('div.timeline').append(_account.map(item => {
                let div = `<div class="time-label"><span class="bg-primary">${item.date} - ${item.dailyBalance2}</span></div>`
                item.accounts.forEach(_item => {
                    div += `              <div>
                ${_item.types}
                <div class="timeline-item">
                  <span class="float-right" style="padding: 5px 10px 5px 5px;">${_item.amount}</span>
                  <h3 class="timeline-header">${_item.account}</h3>
                  <div class="timeline-body"><small class="float-right">${_item.time}</small><b>${_item.category}</b><br>${_item.comment}</div>
                </div>
              </div>`
                })
                return div;
            }).join(''));
        } else {
            toastr.error('Некорректный json-ответ.');
        }
    },
    error: function() {
        toastr.error('Ошибка выполнения запроса.');
    }
});

Записи разбиты по дня (date), нужно за каждый день сложить (если type=1) или вычесть (если type=2) (amount) и вывести получившуюся сумму за день рядям с ${item.date}, сейчас ${item.dailyBalance2} выдаёт undefined

Comments

[Максим Анциферов]

Оформите свой пример на codepen и добавьте данные, которые возвращает ajax, чтоб было легче вам помочь

[pesice4389]

Максим Анциферов, https://codepen.io/covon47226/pen/yLamrdP

Answer 1

[Максим Анциферов]

var json = JSON.parse(`{
  "response": {
    "items": [
      {
        "id": "898",
        "date": "18 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "19 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "19 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "19 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "20 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "21 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      },
      {
        "id": "898",
        "date": "21 января, 2021",
        "time": "22:38",
        "account": "%account%",
        "category": "%category%",
        "amount": "1000.00",
        "amount_html": "%html%",
        "type": "1",
        "type_html": "%type_html%",
        "balance": "%balance%",
        "comment": "-"
      }
    ]
  }
}`);

const accountsGroupedByDates = json.response.items
  .reduce((acc, item) => {
    if (Array.isArray(acc[item.date])) {
      acc[item.date].push(item)
    } else {
      acc[item.date] = [item];
    }
    
    return acc;
  }, {})
const listBalances = Object.entries(accountsGroupedByDates)
  .map(([date, accountsList]) => {
    return {
      date,
      accounts: accountsList,
      dailyBalance: accountsList.reduce((acc, item) => {
        const amount = Number(item.amount);
        return item.type === '1' ? acc + amount : acc - amount;
      }, 0)
    }
  });

$('div.timeline').append(listBalances.map(item => {  
    let div = `<div class="time-label"><span class="bg-primary">${item.date} - ${item.dailyBalance}</span></div>`
    item.accounts.forEach(_item => {
        div += `              <div>
                ${_item.type_html}
                <div class="timeline-item">
                  <span class="float-right" style="padding: 5px 10px 5px 5px;">${_item.amount_html}</span>
                  <h3 class="timeline-header">${_item.account}</h3>
                  <div class="timeline-body"><small class="float-right">${_item.time}</small><b>${_item.category}</b><br>${_item.comment}</div>
                </div>
              </div>`
    })
    return div;
}).join(''));

Comments

[pesice4389]

Спасибо большое!
Подскажит ещё, как можно добавить проверку: если число отрицательно, то выделить его красным цветом, если положительное то зеленым?
И второе: как обрезать получившиеся число до 2 цифр после запятой (без его округления)?

[Максим Анциферов]

1. Можно поместить баланс в span и навесить класс в зависимости от числа

<span class="bg-primary ${item.dailyBalance < 0 ? 'balance-negative' : 'balance-positive'}">${item.date} - ${item.dailyBalance}</span>

2. Обрезать числа после запятой можно при помощи метода toFixed
item.dailyBalance.toFixed(2)

[pesice4389]

Максим Анциферов, toFixed - округляет, а мне нужно именно обрезать...

[Максим Анциферов]

pesice4389, тогда вот такая функция

function trimNumber(num, count) {
    const [a = '0', b = ''] = String(num).split('.');
    return [a, b.slice(0, count).padEnd(count, '0')].join('.')
}