How do I use .promise() so I can work with $.when().done() in my functions?

I have a table which gets data via a JSON object that I append into the table.

I also have a select option menu that I want to use to filter the table with the chosen character-classes, but should finish the hardcoreIncursion() function before filtering.

I'm trying to use $.when().done() for this, but haven't figured out how (or where) I am supposed to use the .promise() method - the jQuery API Documentation doesn't really explain it enough (for me) to grasp the concept.

My Pseudocode would basically be

when hardcoreIncursion() is .done() then { filter table and only list the chosen character-classes }

My real code looks like this:

<!DOCTYPE html>
<html>
<style>
    body,
    html {
        width: 99, 9%;
    }

    tr,
    td,
    th {
        border: 1px solid black;
        padding: 10px;
    }

    button {
        margin: 20px 0px 20px 0px;
    }

    #dead {
        color: red;
    }

    .online {
        background: green;
    }

    .offline {
        background: red;
    }
</style>

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            function hardcoreIncursion() {
                $.getJSON("http://api.pathofexile.com/ladders/Hardcore%20Incursion?limit=200&callback=?", function (result) {

                    $.each(result["entries"], function (index, value) {

                        if (value.dead === true) {
                            $("#tdRanking").append(
                                "<tr>"
                                + "<td>" + value.rank + "</td>"
                                + "<td>" + value.account.name + "</td>"
                                + "<td id=\"dead\">" + value.character.name + "</td>"
                                + "<td>" + value.character.level + "</td>"
                                + "<td>" + value.character.experience + "</td>"
                                + "<td>" + value.character.class + "</td>"
                                + "<td>" + value.account.challenges.total + "</td>"
                                + "<td class=\"offline\">" + "</td>"
                                + "</tr>" + "<br/>");
                        }

                        else if (value.online === true) {
                            $("#tdRanking").append(
                                "<tr>"
                                + "<td>" + value.rank + "</td>"
                                + "<td>" + value.account.name + "</td>"
                                + "<td>" + value.character.name + "</td>"
                                + "<td>" + value.character.level + "</td>"
                                + "<td>" + value.character.experience + "</td>"
                                + "<td>" + value.character.class + "</td>"
                                + "<td>" + value.account.challenges.total + "</td>"
                                + "<td class=\"online\">" + "</td>"
                                + "</tr>" + "<br/>");
                        }

                        else {
                            $("#tdRanking").append(
                                "<tr>"
                                + "<td>" + value.rank + "</td>"
                                + "<td>" + value.account.name + "</td>"
                                + "<td>" + value.character.name + "</td>"
                                + "<td>" + value.character.level + "</td>"
                                + "<td>" + value.character.experience + "</td>"
                                + "<td>" + value.character.class + "</td>"
                                + "<td>" + value.account.challenges.total + "</td>"
                                + "<td class=\"offline\">" + "</td>"
                                + "</tr>" + "<br/>");
                        }
                    });
                });

                $("td").remove("td");
                $("tr:empty").remove();

            }

            hardcoreIncursion();

            function Scion() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Scion')):not(:contains('Ascendant'))");
                });
            }

            function Marauder() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Marauder')):not(:contains('Juggernaut')):not(:contains('Berserker')):not(:contains('Chieftain'))");
                });
            }

            function Ranger() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Ranger')):not(:contains('Deadeye')):not(:contains('Raider')):not(:contains('Pathfinder'))");
                });
            }

            function Witch() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Witch')):not(:contains('Necromancer')):not(:contains('Elementalist')):not(:contains('Occultist'))");
                });
            }

            function Duelist() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Duelist')):not(:contains('Slayer')):not(:contains('Gladiator')):not(:contains('Champion'))");
                });
            }

            function Templar() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Templar')):not(:contains('Inquisitor')):not(:contains('Hierophant')):not(:contains('Guardian'))");
                });
            }

            function Shadow() {
                $.when(hardcoreIncursion()).done(function () {
                    $("tr").not("#tableContent").remove(":not(:contains('Shadow')):not(:contains('Trickster')):not(:contains('Assassin')):not(:contains('Saboteur'))");
                });
            }

            const optionFns = {
                0: () => hardcoreIncursion(),
                1: () => Scion(),
                2: () => Marauder(),
                3: () => Ranger(),
                4: () => Witch(),
                5: () => Duelist(),
                6: () => Templar(),
                7: () => Shadow(),
            }

            $("#classFilter").change(function () {
                const value = $('#classFilter option:selected').val();
                optionFns[value]();
            });
        });

    </script>
</head>

<body>

    <div class="controls">
        <select id="classFilter">
            <option value="0" selected>All</option>
            <option value="1">Scion</option>
            <option value="2">Marauder</option>
            <option value="3">Ranger</option>
            <option value="4">Witch</option>
            <option value="5">Duelist</option>
            <option value="6">Templar</option>
            <option value="7">Shadow</option>
        </select>
    </div>

    <div>
        <table>
            <thead>
                <tr id="tableContent">
                    <th>Rang</th>
                    <th>Accountname</th>
                    <th>Charaktername</th>
                    <th>Level</th>
                    <th>Erfahrung</th>
                    <th>Klasse</th>
                    <th>Herausforderungen</th>
                    <th>Online</th>
                </tr>
            </thead>
            <tbody id="tdRanking">
            </tbody>
        </table>
    </div>

</body>

</html>

Thanks in advance

Solution

Following code will solve your problem.

 <!DOCTYPE html>
 <html>
 <style>
   body,
   html {
     width: 99, 9%;
   }

   tr,
   td,
   th {
     border: 1px solid black;
     padding: 10px;
   }

   button {
     margin: 20px 0px 20px 0px;
   }

   #dead {
     color: red;
   }

   .online {
     background: green;
   }

   .offline {
     background: red;
   }
 </style>

 <head>
   <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
     $(document).ready(function () {
       var hardcoreIncursion = $.getJSON("http://api.pathofexile.com/ladders/Hardcore%20Incursion?limit=200&callback=?", callbackFun);

       $("td").remove("td");
       $("tr:empty").remove();

       function callbackFun(result) {

         $.each(result["entries"], function (index, value) {

           if (value.dead === true) {
             $("#tdRanking").append(
               "<tr>"
               + "<td>" + value.rank + "</td>"
               + "<td>" + value.account.name + "</td>"
               + "<td id=\"dead\">" + value.character.name + "</td>"
               + "<td>" + value.character.level + "</td>"
               + "<td>" + value.character.experience + "</td>"
               + "<td>" + value.character.class + "</td>"
               + "<td>" + value.account.challenges.total + "</td>"
               + "<td class=\"offline\">" + "</td>"
               + "</tr>" + "<br/>");
           }

           else if (value.online === true) {
             $("#tdRanking").append(
               "<tr>"
               + "<td>" + value.rank + "</td>"
               + "<td>" + value.account.name + "</td>"
               + "<td>" + value.character.name + "</td>"
               + "<td>" + value.character.level + "</td>"
               + "<td>" + value.character.experience + "</td>"
               + "<td>" + value.character.class + "</td>"
               + "<td>" + value.account.challenges.total + "</td>"
               + "<td class=\"online\">" + "</td>"
               + "</tr>" + "<br/>");
           }

           else {
             $("#tdRanking").append(
               "<tr>"
               + "<td>" + value.rank + "</td>"
               + "<td>" + value.account.name + "</td>"
               + "<td>" + value.character.name + "</td>"
               + "<td>" + value.character.level + "</td>"
               + "<td>" + value.character.experience + "</td>"
               + "<td>" + value.character.class + "</td>"
               + "<td>" + value.account.challenges.total + "</td>"
               + "<td class=\"offline\">" + "</td>"
               + "</tr>" + "<br/>");
           }
         });
       };



       function Scion() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Scion')):not(:contains('Ascendant'))");
         });
       }

       function Marauder() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Marauder')):not(:contains('Juggernaut')):not(:contains('Berserker')):not(:contains('Chieftain'))");
         });
       }

       function Ranger() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Ranger')):not(:contains('Deadeye')):not(:contains('Raider')):not(:contains('Pathfinder'))");
         });
       }

       function Witch() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Witch')):not(:contains('Necromancer')):not(:contains('Elementalist')):not(:contains('Occultist'))");
         });
       }

       function Duelist() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Duelist')):not(:contains('Slayer')):not(:contains('Gladiator')):not(:contains('Champion'))");
         });
       }

       function Templar() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Templar')):not(:contains('Inquisitor')):not(:contains('Hierophant')):not(:contains('Guardian'))");
         });
       }

       function Shadow() {
         hardcoreIncursion.done(function (result) {
           callbackFun(result);
           $("tr").not("#tableContent").remove(":not(:contains('Shadow')):not(:contains('Trickster')):not(:contains('Assassin')):not(:contains('Saboteur'))");
         });
       }

       const optionFns = {
         0: () => hardcoreIncursion.done(function (result) {
           callbackFun(result);
         }),
         1: () => Scion(),
         2: () => Marauder(),
         3: () => Ranger(),
         4: () => Witch(),
         5: () => Duelist(),
         6: () => Templar(),
         7: () => Shadow(),
       }

       $("#classFilter").change(function () {
         const value = $('#classFilter option:selected').val();
         optionFns[value]();
       });
     });

   </script>
 </head>

 <body>

   <div class="controls">
     <select id="classFilter">
       <option value="0" selected>All</option>
       <option value="1">Scion</option>
       <option value="2">Marauder</option>
       <option value="3">Ranger</option>
       <option value="4">Witch</option>
       <option value="5">Duelist</option>
       <option value="6">Templar</option>
       <option value="7">Shadow</option>
     </select>
   </div>

   <div>
     <table>
       <thead>
         <tr id="tableContent">
           <th>Rang</th>
           <th>Accountname</th>
           <th>Charaktername</th>
           <th>Level</th>
           <th>Erfahrung</th>
           <th>Klasse</th>
           <th>Herausforderungen</th>
           <th>Online</th>
         </tr>
       </thead>
       <tbody id="tdRanking">
       </tbody>
     </table>
   </div>

 </body>

 </html>