我仍然是新的javascript，我需要你的帮助。我试图从API获取JSON数据，并使用html在表中显示它。到目前为止，我已经能够使用html显示数据，但当我试图在表中组织它时，它不起作用，那么我如何才能在html表中显示数据呢?下面是html表格:
`enter code here`<!DOCTYPE html>
`enter code here`<html>
`enter code here`<head>
`enter code here`<title>Scorejedi</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>ScoreBoard</h1>
<table border = "1">
<div class="title-box">
<tr>
<td><div class="league">
<img id="leagueLogo">
<p id="leagueName">League Name</p>
</div>
</td>
<td>
<div class="team">
<img id="homeLogo" >
<p id="homeName">Team name</p>
</div>
</td>
<td>
<div>
<p id="goals"></p>
</div>
</td>
<td>
<div class="team">
<img id="awayLogo">
<p id="awayName">Team name</p>
</div>
</td>
</tr>
</div>
</table>
<hr>
<div id="matchTable" class="matches-table">
</div>
</div>
</table>
<script src="main.js"></script>
</body>
</html>
//getting the DOM elements
var elapsedTime = document.querySelector("#elapsed");
var homeTeamImage = document.querySelector("#homeLogo");
var homeTeamName = document.querySelector("#homeName");
var awayTeamImage = document.querySelector("#awayLogo");
var awayTeamName = document.querySelector("#awayName");
var lastMatchGoal = document.querySelector("#goals");
var leagueName= document.querySelector("#leagueName");
var leagueCountry= document.querySelector("#leagueCountry");
var leagueLogo= document.querySelector("#leagueLogo");
var matchTable = document.querySelector("#matchTable");
//the functions to create an element
function addMatchTile(data){
//createing the tile div
var matchtile = document.createElement('div');
matchtile.classList.add("match-tile");
//creating the home match box
var homeTeam = document.createElement('div');
homeTeam.classList.add("team");
//creating the image and the text
var homeTileTeamName = document.createElement('p');
homeTileTeamName.innerHTML = data['teams']['home']['name'];
var homeTileTeamLogo = document.createElement('img');
homeTileTeamLogo.src=data['teams']['home']['logo'];
homeTeam.appendChild(homeTileTeamLogo);
homeTeam.appendChild(homeTileTeamName);
var awayTeam = document.createElement('div');
awayTeam.classList.add("team");
//creating the image and the text
var awayTileTeamName = document.createElement('p');
awayTileTeamName.innerHTML = data['teams']['away']['name'];
var awayTileTeamLogo = document.createElement('img');
awayTileTeamLogo.src=data['teams']['away']['logo'];
awayTeam.appendChild(awayTileTeamLogo);
awayTeam.appendChild(awayTileTeamName);
//creating the league info
var leagueInfo = document.createElement('div');
matchtile.classList.add("league");
//creating the image and the text
var officialLeagueName = document.createElement('p');
officialLeagueName.innerHTML = data['league']['name'];
var officialLeagueLogo = document.createElement('img');
officialLeagueLogo.src =data['league']['logo'];
leagueInfo.appendChild(officialLeagueName);
leagueInfo.appendChild(officialLeagueLogo);
//createing the score
var score = document.createElement('p');
score.innerHTML = data['goals']['home'] + " - " + data['goals']['away'];
//append all the element to the parent
matchtile.appendChild(leagueInfo);
matchtile.appendChild(homeTeam);
matchtile.appendChild(score);
matchtile.appendChild(awayTeam);
matchTable.appendChild(matchtile);
}
//fetching the data
fetch("https://v3.football.api-sports.io/fixtures?date=2021-09-03", {
"method": "GET",
"headers": {
"x-rapidapi-host": "v3.football.api-sports.io",
"x-rapidapi-key": "7c8b6208c94aaaaf7861641703244162"
}
})
.then(response => response.json().then(data => {
var matchesList = data['response'];
var fixture = matchesList[0]['fixture'];
var goals = matchesList[0]['goals'];
var teams = matchesList[0]['teams'];
var league = matchesList[0]['league'];
console.log(matchesList.length);
//Now let's set our first match
leagueName= league['name'];
leagueLogo= league['logo'];
homeTeamImage.src = teams['home']['logo'];
homeTeamName.innerHTML = teams['home']['name'];
awayTeamImage.src = teams['away']['logo'];
awayTeamName.innerHTML = teams['away']['name'];
lastMatchGoal.innerHTML = goals['home']+ " - " + goals['away'];
for(var i = 1; i<matchesList.length;i++){
addMatchTile(matchesList[i]);
}
}))
.catch(err => {
console.log(err);
});
我发现最好的方法是使用HTMLtemplate元素和regex
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
下面是一些代码
<table class="table" id="foo">
<thead>
<th>Column</th>
<th>headers</th>
<th>go</th>
<th>here</th>
</thead>
<tbody>
<tbody>
</table>
<template id="dataRow">
<tr>
<td>{value1}</td>
<td>{value2}</td>
<td>{value3}</td>
<td>{value4}</td>
</tr>
</template>
这设置了我们将修改并放置在<tbody>中的标记。
<script>
function loadAndRenderData() {
var jsonData = fetchData();
const template = document.querySelector("#dataRow").innerHTML;
for(let item of jsonData)
{
let t = template;
t = t.replace(/{value1}/g, item.value1;
t = t.replace(/{value2}/g, item.value2;
t = t.replace(/{value3}/g, item.value3;
t = t.replace(/{value4}/g, item.value4;
document.querySelector("#foo tbody").innerHtml += t;
}
}
</script>
我们只是将模板的内容与替换值附加到表中的tbody中。
注意:我几年前就这样做了，我还没有测试过这段代码，所以不能保证它能工作。