I successfully managed to populate an HTML table with the json responses. However, I'm encountering an issue when it comes to displaying the images associated with the json variables. I'm only able to display the URL links for the images.
Below is a snippet 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,
),
),
Furthermore, here is the code snippet 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>
To address this issue, I am looking to display the actual images associated with homeTeam.logo and awayTeam.logo instead of just their URLs. Any help on this matter would be greatly appreciated. Thank you.