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

如何在循环JSON的同时使更有效的js for php在循环内

3 个答案: