我成功地将json响应加载到一个HTML表中。但是,我在显示json变量的图像时遇到了问题。我只能显示链接。
下面是json文件的一个示例:
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,
),
),
下面是将json输出导入HTML表的代码:
<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>
如您所见,我需要显示homeTeam.logo和awayTeam.logo的图像,而不是它们的超链接。
1条答案
按热度按时间h7appiyu1#
你试过添加一个
img
标签吗?我不确定这是不是你想要的...