在 HTML 表格中显示来自 API 的数据

Question

我正在从两个不同的 API 调用中提取数据并显示在一个列中。

第一个循环（图像列）从 API 调用 JSON 数据并在第一列显示图像，第二个循环（其他列）在剩余列中显示用户战斗数数据，如下所示：

Currently it looks like this:

| images   | other   |  
|__________|_________|   
|    1     |         |
|    2     |         |
|    3     |         |
|    4     |         |
|    5     |         |
|    6     |         |
|    7     |         |
|    8     |         |  
|          |    1    |
|          |    2    |
|          |    3    |
|          |    4    |
|          |    5    |
|          |    6    |
|          |    7    |
|          |    8    |
|__________|_________|


What I want to accomplish is this:

| images   | other   |  
|__________|_________|   
|    1     |    1    |
|    2     |    2    |
|    3     |    3    |
|    4     |    4    |
|    5     |    5    |
|    6     |    6    |
|    7     |    7    |
|    8     |    8    |
|__________|_________|

这是我的代码（我将 API 调用放在顶部等）

 <table class="table table-sm">
      <thead class="thead-dark">
        <tr>
          <th>Tank</th>
          <th>Battles</th>
          <th>Wins</th>
          <th>Losses</th>
          <th>Kills</th>
          <th>Mastery class</th>
          <th>Survived matches</th>
          <th>XP gained</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($tanks['data'] as $key => $value) { ?>  
          <tr>
            <td><?php echo '<img src="'.$value['images']['big_icon'].'"/>'; ?> </td>
        <?php } ?>
            <?php foreach ($tanks_stats['data']['1076056102'] as $key => $value) { ?>
                <td><?php echo $value['all']['battles']; ?> </td>
                <td><?php echo $value['all']['wins']; ?> </td>
                <td><?php echo $value['all']['losses']; ?> </td>
                <td><?php echo $value['all']['frags']; ?> </td>
                <td><?php echo $value['mark_of_mastery']; ?> </td>
                <td><?php echo $value['all']['survived_battles']; ?> </td>
                <td><?php echo number_format($value['all']['xp']); ?> </td>
              </tr>
            <?php } ?>   
      </tbody>
    </table>

目前，它在第一列显示所有坦克图像，然后在填充所有坦克图像后显示剩余数据。

我想要做的是让第一列中的图像显示在数据列旁边。我遇到的问题是因为它们是两个不同的 API 调用，我无法将它们放在同一个循环中。

Answer 1

您正在生成格式错误的 HTML 表格，因为您的浏览器正在从以下位置创建 8 行：

<?php foreach ($tanks['data'] as $key => $value) { ?>  
    <tr>
        <td><?php echo '<img src="'.$value['images']['big_icon'].'"/>'; ?> </td>
<?php } ?>

而后8行​​来自：

<?php foreach ($tanks_stats['data']['1076056102'] as $key => $value) { ?>
        <td><?php echo $value['all']['battles']; ?> </td>
        <!-- omitted for brevity -->
    </tr>
<?php } ?>  

我建议您在遇到此类问题时使用开发人员工具查看生成的 HTML。

---

您可以使用array_merge 组合 API 调用结果的各个元素（假设它们的长度相同），然后在一个干净的循环中显示它们（我抽象出了您数据的一些细节）：

<?php

// decode as associative array
$tanks = json_decode('[{"big_icon":"images/add.png"}, {"big_icon":"images/block.png"}, {"big_icon":"images/delete.png"}]', true);
$tanks_stats = json_decode('[{"wins":1,"losses":2}, {"wins":3, "losses":4}, {"wins":5,"losses":6}]', true);

// combine the object arrays
$mydata = array();
for ($i = 0; $i < count($tanks); $i++) {
    $o = array_merge((array) $tanks[$i], (array) $tanks_stats[$i]);
    array_push($mydata, $o);
} 

//var_dump($mydata);
?>

<table>
<?php foreach ($mydata as $key => $value) { ?>  
  <tr>
    <td><?php echo '<img src="'.$value['big_icon'].'"/>'; ?> </td>
    <td><?php echo $value['wins']; ?> </td>
    <td><?php echo $value['losses']; ?> </td>
  </tr>
<?php } ?>
</table>