Как сделать более эффективный JS для цикла внутри PHP в то время как цикл JSON

Question

Я выбираю значения из моей базы данных в MySQL и сравниваю их со значениями из JSON.Я получаю правильные результаты, но так как я использую команду add, результаты отображаются по одному, что выглядит как анимация, я хотел бы получить их все сразу и показать какой-то значок загрузки во время работы цикла.Я пробовал несколько разных способов, но ничего не получалось.

<?php $sql= "select a_id,b_id,res_a,res_b from betts_gr where u_id='".$u_id[0]."'";
$user_bets = mysqli_query($conn,$sql);

while($user_bets1 = mysqli_fetch_array($user_bets)){
?>
<script>
    $(document).ready(function() {
        var a_id = "<?php echo $user_bets1[0]?>";
        .....
        var car = [];
        $.getJSON('http://api.football-api.com/2.0/matches? 
            comp_id = 1204 & from_date = '+today+' & to_date = '+plusmonth+' & Authorization ', 
            function(data) {
                var html = "";
                console.log(data);
                $.each(data, function(index, value) {
                    var teama = value.localteam_name;
                    var teamb = value.visitorteam_name;
                    .......

                    function add(name, point) {
                        car.push({
                            teamb: teamb,
                            teama: teama,
                            form: form,
                            data: data,
                            teama_id: teama_id,
                            teamb_id: teamb_id,
                            a_res: a_res,
                            b_res: b_res
                        });
                    }

                    add(teama, teamb, data, form, teama_id, teamb_id, a_res, b_res);
                });

                for (var n = 0; n < car.length; n++) {
                    if (car[n].teama_id == a_id && car[n].teamb_id == b_id) {

                        html += "<tr><td><input type='hidden' name='aid" + n + "' 
                        value = '"+car[n].teama_id+"' > < input type = 'hidden'
                        name = 'bid"+n+"'                           
                        value = '"+car[n].teamb_id+"' > " +
                            car[n].data +
                            "</td><td> " + car[n].teama + "</td><td>" + car[n].a_res + "-" +
                            car[n].b_res + "</td><td> " +
                            car[n].teamb + '</td><td> you predicted ->' + pred_resa + ' - ' + pred_resb +
                            '</tr>';
                    }
                }

                $(".message").append(html);
            });
    });
</script>
<?php  }  ?>

Answer 1

Не следует так смешивать PHP и Javascript.В настоящее время это приведет к выполнению функций X document.ready с X запросами getJSON.

Если вы хотите выполнять запросы API от локального клиента, вы должны выполнить ОДНУ функцию javascript, в которой вы передаете выбранные user_bets в виде массива.,Существуют различные возможности определить, все ли загрузки были завершены: либо подсчитывать и проверять после каждого обратного вызова, достигнуто ли максимальное число, либо использовать Promises и Promise.all () .

<script>
    var user_bets = <?php echo json_encode($user_bets);?>;
    $(document).ready(function () {
        Promise.all(user_bets.map(function (id) {
            return fetchFromApi(id);
        })).then(function(array){
            var html = "";
            for(var i = 0; i < array.length; i++){
                html += processData(array[i]);
            }
            $(".message").append(html);
        });
    });

    function fetchFromApi(user_id) {
        return new Promise(function (resolve, reject) {
            $.getJSON()
                .done(function (data) {
                    resolve(data);
                })
                .fail(function (error) {
                    reject(error);
                });
        });
    }

    function processData(data){
        var html = '';
        // do your html processing of a single api call here
        return html;
    }
</script>

В качестве альтернативы вы можете использовать CURL для выполнения запросов API на стороне сервера.

Answer 2

Спасибо за совет, я просто понимаю, что должен получить данные одним запросом.Я передал весь массив в js, и так как я не уверен, как работает promise.all, я сделал два для вложенных циклов и работает нормально, единственное, что я до сих пор не могу понять, как проверить, являются ли циклызакончил, чтобы я мог добавить значок загрузки во время работы цикла.

function add(name, point) {
car.push({ teamb : teamb, teama : teama, form:form, data:data, teama_id:teama_id, 
teamb_id:teamb_id, a_res:a_res, b_res:b_res});
}

add(teama,teamb,data,form,teama_id,teamb_id,a_res,b_res);
});



for(var n=0;n<car.length;n++){
var taba = [<?php echo json_encode($at1)?>];
var tchild = taba[0];
      for(var u=0;u<tchild.length;u++){
            if(car[n].teama_id == tchild[u].localteam_id 
            && car[n].teamb_id == tchild[u].visitorteam_id){
                   html +=   "<tr><td><input type='hidden' name='aid"+n+"'
                   value='"+car[n].teama_id+"'> 
                   <input type='hidden' name='bid"+n+"' 
                   value='"+car[n].teamb_id+"'>"
                   +car[n].data  
                      +"</td><td> "+car[n].teama + "</td><td>"+ car[n].a_res 
                      + "-"+  car[n].b_res  + "</td><td> "
                      + car[n].teamb + '</td><td> you predicted - 
                      >'+tchild[u].localteam_score +' - '+tchild[u].visitorteam_score +
                     '</td></tr>';

}
}
}

$(".message").append(html);

Answer 3

пример использования Array.map и литералов шаблона вместо цикла for и простой строки concat:

const isTargetTeam = item => item.teama_id == a_id && item.teamb_id == b_id;
const html = car.slice(0) // copy the array car
                 .filter(isTargetTeam)
                 .map((item, index) => 
                      `<tr>
                          <td>
                              <input type='hidden' name='aid${index}' value='${item.teama_id}'>
                              <input type='hidden' name='bid${index}' value='${item.teamb_id}'>
                              ${item.data}
                          </td>
                          <td>
                              ${item.a_res}-${item.b_res}
                          </td>
                          <td>
                              ${item.teamb}
                          </td>
                          <td> you predicted -> ${pred_resa} - ${pred_resb}
                      </tr>`
                     ).join('')