javascript - 从 api 获取点击数据

Question

我从 API 中获取一些数据。我对 API 进行了两次调用，并将输出保存在变量中。现在我有两个链接 - 一个用于 Data1，另一个用于 Data2。如果我单击 Data1，则应加载第一个调用。单击Data2 显示应进行第二次调用。当有人访问该网站时，Data1 应该是默认显示的数据集。

我有一个几乎可行的解决方案:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(function(){
                $("#data1").click(function(e){
                    e.preventDefault();
                    var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD1) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
                });
                $("#data2").click(function(e){
                    e.preventDefault();
                    var datasets = document.getElementById("datasets");
                    var html = '';
                    var i = 0;
                    var results = <?php echo json_encode($resultsD2) ?>;
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
                });
            });
        </script>

现在，如果我单击Data1，则会加载正确的数据。当我点击 Data2 时也是如此。但是如何在站点加载时将 Data1 设置为默认值呢？而且我的代码看起来构造很糟糕。我重复整个 for 循环两次...

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
    function setData(dataset_type){
        var html = '';
                    var i = 0;
        var products = document.getElementById("datasets");
                    var results = <?php echo json_encode($resultsD1) ?>;
        if(dataset_type == 2){
            results = <?php echo json_encode($resultsD2) ?>;
        }
                    for (const result of results) {
                        html += '<article class="dataset"><span class="title">' + result["title"] + '</span><div class="data-meta">';
                        html += '<span class="release">' + result["release"] + '</span></div></article>';
                        i++;
                    }
                    products.innerHTML = html;
    }

    // Default Call onload for dataset 1
    setData(1);

            $("#data1").click(function(e){
                e.preventDefault();
                setData(1);
            });
            $("#data2").click(function(e){
                e.preventDefault();
                setData(2);
            });     
        });
    </script>