从API获取点击数据

Question

I get some data out of an API. I make two calls to the API and save this output in a variable. Now I have two links - One for Data1 and one for Data2 . If I click on Data1 , the first call should be loaded. Click on Data2 shows the second call should take place. When someone visits the site, Data1 should be the default displayed dataset.

I have a nearly working solution:

    <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>

Now if I click on Data1 the correct data is loaded. The same when I click on Data2 . But how can I make Data1 as default when the site is loaded? Also my code seems so bad constructed. I repeat the whole for loop two times...

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>

Answer 2

You need to add the logic to load the data in function, and call the function on button click as well as on page load. As per your code, as soon as button is clicked the new data is replacing your old data, do you want to do that or you want to keep old data as it is and append new data? I have added comments in the script as answered for above question

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script> function loadData(){ 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.append(html); // if you want to append data uncomment this and comment below products.innerHTML = html; // if you want to replace data comment this and uncomment above } $(function(){ // function call on page load loadData(); $("#data1").click(function(e){ e.preventDefault(); loadData(); }); $("#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> 

Answer 3

You can create a function

var datasets =document.getElementById("datasets");// make it global
$( window ).load(function() {

       loadData(whichButtonCliked,datasets )
});

loadData(whichButtonCliked,datasets )
{
 e.preventDefault();

                    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;
}

and call this function on click now you have to make condition which button is clicked