如何在 php while loop JSON 中制作更高效的 js for 循环

Question

我在 mysql 中从我的数据库中选择值，并将它们与 JSON 中的值进行比较。我收到了正确的结果，但是由于我使用的是附加结果，因此结果会一一显示，这看起来像动画我想一次全部获取它们并在循环运行时显示某种加载图标，我尝试了几种不同的方法，但没有任何效果。

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

使用 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('')

Answer 2

你不应该像那样混合 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 3

感谢您的建议，我刚刚意识到我应该通过一个请求获取数据。我已经将整个数组传递给 js 并且由于我不确定 promise.all 是如何工作的，所以我做了两个嵌套的 for 循环并且工作正常，唯一我仍然无法弄清楚如何检查循环是否是完成，所以我可以在循环运行时添加加载图标。

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