How to organize loading of records keeping sorting by date?

  • 0
    Hello! There is a way to download records.

    -1 September
    --Record
    --Record
    --Record
    -2 September
    --Record
    --Record


    Initially, only 10 records are loaded, how can you load more records so that the date is not duplicated? Those. if on September 2, 10 records, initially only 5 were loaded, when you click on the button, load the remaining 5 records into the existing block with this date, and the remaining 5 have already been loaded into the blocks with their date?

    $.ajax({
        url: '../ajax/money.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) {
                        acc[index].accounts.push({
                            account: cur.account,
                            time: cur.time,
                            category: cur.category,
                            subcategory: cur.subcategory,
                            comment: cur.comment,
                            types: cur.type,
                            amount: cur.amount,
                            balance: cur.balance
                        })
                    } else {
                        cur.accounts = []
                        cur.accounts.push({
                            account: cur.account,
                            time: cur.time,
                            category: cur.category,
                            subcategory: cur.subcategory,
                            comment: cur.comment,
                            types: cur.type,
                            amount: cur.amount,
                            balance: cur.balance
                        })
                        acc.push(cur)
                    }
                    return acc
                }, [])
                $('div.timeline').html(_account.map(item => {
                    let div = `<div class="time-label"><span class="bg-primary">${item.date}</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} / ${_item.subcategory}</b><br>${_item.comment}</div>
                    </div>
                  </div>`
                    })
                    return div;
                }).join(''));
            } else {
                toastr.error('Некорректный json-ответ.');
            }
        },
        error: function() {
            toastr.error('Ошибка выполнения запроса.');
        }
    });
    JavaScript Molly Carson, Jul 19, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!