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

时间:2018-10-03 22:35:27

标签: php html json

我正在从两个不同的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>

此刻,它在第一列中显示所有储罐图像,然后在填充所有储罐图像之后显示剩余数据。

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

enter image description here

1 个答案:

答案 0 :(得分:0)

您正在生成格式错误的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>