WordPress｜繰り返しフィールドのデータを非同期で取得して表示する方法

<?php
$list_items = SCF::get('country_list');
$count = 0;
?>

<table class="js-table">
    <tr>
        <th class="th">国名</th>
        <th class="th">首都</th>
    </tr>
    <?php foreach ($list_items as $list_item) : ?>
        <?php if ($count < 5) : ?>
            <tr>
                <th><?php echo $list_item['country_name']; ?></th>
                <td><?php echo $list_item['capital_name']; ?></td>
            </tr>
            <?php $count++; ?>
        <?php endif; ?>
    <?php endforeach; ?>
</table>

<div class="btn">
    <button id="ajax_demo_submit" class="js-btn">もっと見る</button>
</div

<?php
function add_my_ajaxurl() {
?>
    <script>
        const ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

function ajax_get_new_fields() {
    $returnObj = array();
    // Smart Custom Fieldのデータを取得。「7」はカスタムフィールドを表示している固定ページのID
    $list_items = SCF::get('country_list', 7);

    // 6件目以降のデータを取得
    for ($i = 5; $i < count($list_items); $i++) {
        $list_item = $list_items[$i];
        $returnObj[] = array(
            'country_name' => $list_item['country_name'],
            'capital_name' => $list_item['capital_name'],
        );
    }

    //JSON形式の文字列で返す
    echo json_encode($returnObj);
    die();
}

add_action('wp_ajax_ajax_get_new_fields', 'ajax_get_new_fields');
add_action('wp_ajax_nopriv_ajax_get_new_fields', 'ajax_get_new_fields');

document.addEventListener('DOMContentLoaded', function () {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', ajaxurl);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            const jsonData = response;
            const submit = document.querySelector('#ajax_demo_submit')
            let currentIndex = 0;

            submit.addEventListener('click', function () {
                const table = document.querySelector('.js-table');
                const dataToShow = jsonData.slice(currentIndex, currentIndex + 5);
                currentIndex += 5;

                dataToShow.forEach(function (val) {
                    const newRow = document.createElement('tr');
                    newRow.classList.add('added-row');
                    newRow.innerHTML = `<th>${val.country_name}</th><td>${val.capital_name}</td>`;
                    table.appendChild(newRow);

                    setTimeout(function () {
                        newRow.classList.add('is-show');
                    }, 100);
                });

                if (currentIndex >= jsonData.length) {
                    submit.classList.add('is-hidden');
                }
            });
        }
    };
    xhr.send('action=ajax_get_new_fields');
});

$(function () {
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action': 'ajax_get_new_fields',
        },
        success: function (response) {
            jsonData = JSON.parse(response);
        }
    });

    // 現在表示しているデータのインデックス
    let currentIndex = 0;

    $('#ajax_demo_submit').on('click', function () {
        const table = document.querySelector('.js-table');

        // 残りのデータから5件ずつ取得
        const dataToShow = jsonData.slice(currentIndex, currentIndex + 5);
        currentIndex += 5;

        // 取得したデータを表示
        dataToShow.forEach((val) => {
            const newRow = document.createElement('tr');
            newRow.classList.add('added-row');
            newRow.innerHTML = `
                <th>${val.country_name}</th>
                <td>${val.capital_name}</td>
            `;
            table.appendChild(newRow);

            // setTimeoutを使用してアニメーションのトリガーを遅延
            setTimeout(function () {
                $(newRow).addClass('is-show');
            }, 100);
        });

        // カスタムフィールドのデータがすべて表示された場合はボタンを非表示に
        if (currentIndex >= jsonData.length) {
            $('#ajax_demo_submit').addClass('is-hidden')
        }
    });
});

.added-row {
  opacity: 0;
  transition: opacity 1s;
}

.added-row.is-show {
  opacity: 1;
}

.btn button.is-hidden {
  opacity: 0;
  transition: opacity 1s;
}