How am I supposed to load the images of json reponses into HTML?

Question

I successfully loaded the json responses into an HTML table. However, I am having a problem displaying the images of the json variables. I could only display the links.

Here is a sample of the json file:

array (
  'api' => 
  array (
    'results' => 10,
    'fixtures' => 
    array (
      0 => 
      array (
        'fixture_id' => 932017,
        'league_id' => 4633,
        'league' => 
        array (
          'name' => 'Pro League',
          'country' => 'Saudi-Arabia',
          'logo' => 'https://media-3.api-sports.io/football/leagues/307.png',
          'flag' => 'https://media-3.api-sports.io/flags/sa.svg',
        ),
        'event_date' => '2023-01-22T20:30:00+03:00',
        'event_timestamp' => 1674408600,
        'firstHalfStart' => NULL,
        'secondHalfStart' => NULL,
        'round' => 'Regular Season - 14',
        'status' => 'Not Started',
        'statusShort' => 'NS',
        'elapsed' => 0,
        'venue' => 'Mrsool Park',
        'referee' => NULL,
        'homeTeam' => 
        array (
          'team_id' => 2939,
          'team_name' => 'Al-Nassr',
          'logo' => 'https://media.api-sports.io/football/teams/2939.png',
        ),
        'awayTeam' => 
        array (
          'team_id' => 2934,
          'team_name' => 'Al-Ettifaq',
          'logo' => 'https://media.api-sports.io/football/teams/2934.png',
        ),
        'goalsHomeTeam' => NULL,
        'goalsAwayTeam' => NULL,
        'score' => 
        array (
          'halftime' => NULL,
          'fulltime' => NULL,
          'extratime' => NULL,
          'penalty' => NULL,
        ),
      ),

And here is the code for importing the json output into the HTML table:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Home Team</th>
        <th>Match Date</th>
        <th>Away Team</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []
    

    $.ajax({
        method:'GET',
        url:'https://api-football-v1.p.rapidapi.com/v2/fixtures/team/2939/next/10?rapidapi-key={API-Key}',
        success:function(response){
            myArray = response
            buildTable(myArray)
            console.log(myArray)
        }
    })



    function buildTable(data){
        var table = document.getElementById('myTable')
        for (var i = 0; i < data.api.fixtures.length; i++){
        const rm = data.api.fixtures[i];

            var row = `<tr>
                       <td>${rm.homeTeam.logo}</td>
                       <td>${rm.event_date}</td>
                       <td>${rm.awayTeam.logo}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>

As you can see, I need to show the images of homeTeam.logo and awayTeam.logo instead of their hyperlinks. Thanks in advance

Answer 1

Have you tried adding an img tag? I'm not sure if this is what you're asking for...

var row = `<tr>
    <td><img src="${rm.homeTeam.logo}" /></td>
    <td>${rm.event_date}</td>
    <td><img src="${rm.awayTeam.logo}" /></td>
    </tr>`