Displaying data from API in HTML Table

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.

you could probably get the data for each column first, saving each in a different variable, and then output the table. — Devin Crossman, Oct 03 '18 at 22:52
@killerkan000 Is there any sort of relational data between the pictures and numbers? Such as image ID's etc.? Is this coming from a db? Or is it just JSON in a file? — rhuntington, Oct 03 '18 at 23:36

chakeda · Accepted Answer · 2018-10-06T18:31:05.193

0

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>

edited Oct 06 '18 at 18:31

answered Oct 03 '18 at 23:30

chakeda

1,551
1
18
40

Hmmm. I appreciate the time you took to help mate. With the array_merge suggestion, it still displays the the tank images followed by the remaining data below (as represented in my original question diagram). – killerkan000 Oct 04 '18 at 03:21
I see - I haven't tested it. Can you post what `$tanks['data']` and `$tanks_stats['data']['1076056102']` looks like? – chakeda Oct 04 '18 at 14:07
But if you follow my idea, perhaps this SO question can help: https://stackoverflow.com/questions/455700/what-is-the-best-method-to-merge-two-php-objects – chakeda Oct 04 '18 at 14:16
it looks just like the illustration I did in original question; images populated followed by the data rows after images. But this time, the where the data rows start, the image row has a box outline where pic should be -- weird – killerkan000 Oct 05 '18 at 00:15
can you post what your data looks like? – chakeda Oct 05 '18 at 01:15
I have attached an image of the output with the suggestion you provided. As you can see, the tank images should be in same row as the corresponding data. – killerkan000 Oct 05 '18 at 03:06
@killerkan000 I've updated and tested my solution. Let me know if it works for you! – chakeda Oct 06 '18 at 18:19

Displaying data from API in HTML Table

1 Answers1