在HTML表中显示API中的数据

Question

I'm extracting data from two different API calls and displaying in a column.

The first loop (images column) is calling the JSON data from API and displaying images in first column, the second loop (other column) is displaying user number of battles data in remaining columns, like so:

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    |
|__________|_________|

Here is my code (I left the API calls at top etc)

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

At the moment, it displays all the tank images in the first column, then the remaining data is displayed AFTER all the tank images have populated.

What I am trying to do is get the images in first column to display next to the data column. The problem i'm having is because they are two different API calls I can't get them in same loop.

Answer 1

You're producing a malformed HTML table because your browser is creating 8 rows from:

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

And the latter 8 rows from:

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

I recommend looking at your resulting HTML using developer tools when you have issues like this.

---

You can use array_merge to combine the individual elements of the API call results (assuming they are the same length), then display them in one clean loop (I abstracted out some details of your data):

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