Javascript 根据来自外部服务器/API的信息，使用td创建新tr

我正在尝试创建新的tr和td元素，以从该服务器生成JavaScript分数表：

我很难理解如何将网站上的信息转换成一个能在我的网站上显示的功能。是出了什么问题还是需要更多

谢谢

function getStryktipset() {
    return fetch('https://stryk.herokuapp.com/strycket2021')
        .then(function(response){
            return response.json();
        })
        .then(function (data){
            return data.matches[0].teams
        })
}

function generate_tablerows() {
    for (var i = 0; i < 13; i++) {
      var row = document.createElement("tr");
    }
    for (var j = 0; j < 13; j++) {
    var cell = document.createElement("td");

        var cellText = document.createTextNode();
        cell.appendChild(cellText);
        row.appendChild(cell);
        document.getElementsById("table").appendChild(row);
    }
}

function start(){
    getStryktipset().then(generate_tablerows)
}

函数getStryktipset（）{ 返回获取（'https://stryk.herokuapp.com/strycket2021') .然后（功能（响应）{ 返回response.json（）； }) .then（功能（数据）{ 返回数据。匹配项[0]。团队 }) } 函数generate_tablerows（）{ 对于（变量i=0；i<13；i++）{ var行=document.createElement（“tr”）； } 对于（var j=0；j<13；j++）{ var cell=document.createElement（“td”）； var cellText=document.createTextNode（）； cell.appendChild（cellText）； 子行（单元格）； document.getElementsById（“表”）.appendChild（行）； } } 函数start（）{ getStryktipset（）。然后（生成表格行） } 从我掌握的数据来看应该是什么样子：

---

我已经有了表格标题，但没有其他内容。

这里有一个简单的示例供您尝试

返回的结果已经是JSON格式，因此您可以像使用JavaScript对象一样使用它

document.addEventListener（'DOMContentLoaded'，异步函数（）{
start（）；
});
函数start（）{
getStryktipset（）.then（drawTable）；
}
函数getStryktipset（）{
返回获取（'https://stryk.herokuapp.com/strycket2021')
.然后（功能（响应）{
返回response.json（）；
});
}
函数绘图表（结果）{
常量匹配=result.matches；
const table=document.createElement（'table'）；
//表格标题
const headers=document.createElement（'tr'）；
['Rad:'，'Lag:'，'1'，'X'，'2'].forEach（头=>{
const th=document.createElement（'th'）；
th.innerText=标题；
标题。追加子项（th）；
});
表.appendChild（标题）；
//表内容
matches.forEach（match=>{
//比赛号码的td
常量matchNumber=document.createElement（'td'）；
matchNumber.textContent=match.matchNumber；
//小组运输署
const teams=document.createElement（'td'）；
teams.textContent=`${match.teams['1'].name}-VS-${match.teams['2'].name}`；
//运输署公布比赛结果
const outCome1=document.createElement（'td'）；
如果（match.matchInfo.output=='1'）{
outCome1.innerHTML='✓'；
}
const outComeX=document.createElement（'td'）；
如果（match.matchInfo.outcome=='X'）{
outComeX.innerHTML='✓'；
}
const outCome2=document.createElement（'td'）；
如果（match.matchInfo.output=='2'）{
outCome2.innerHTML='✓'；
}
//将表数据追加到行。
const row=document.createElement（'tr'）；
行.appendChild（匹配号）；
世界其他地区（小组）；
第1行：附加子项（结果1）；
第行。追加子项（结果）；
第2行（结果2）；
//然后将行追加到表中。
表2.追加子项（行）；
});
//最后，将表附加到目标HTML标记。
document.querySelector（'body'）.appendChild（表）；
}

表格，
th，
运输署{
边框：1px纯黑；
}

使用

table.insertRow（）

和

Row.insertCell（）

函数getStryktipset（）{ 返回获取（'https://stryk.herokuapp.com/strycket2021') .然后（功能（响应）{ 返回response.json（）； }); } getStryktipset（）。然后（生成表格行）； 函数CreateHeadlow（表）{ 常量列=['Rad:'，'Lag:'，'1'，'X'，'2']， headlow=table.insertRow（）； columns.forEach（函数（col）{ const cell=document.createElement（'th'）； cell.textContent=col； 头枕.附肢儿童（单元） }); } 函数createMatchRows（表，匹配项）{ 常量结果=['1'，'X'，'2']； 匹配。forEach（函数（m）{ 常量行=table.insertRow（）， teamText=[m.teams[1]。名称，m.teams[2]。名称。加入（'-'）， //为每个单元格的内容创建数组 内容=[m.matchNumber，teamText]； //将结果内容添加到复选框或空字符串中 结果：forEach（职能（五）{ content.push（v==m.matchInfo.output？'✓'：“”） }); //对内容数组进行loop操作，并为每个输入创建一个单元格 内容。forEach（函数（v，i）{ const cell=row.insertCell（）； cell.innerHTML=v； 如果（i>1）{ cell.className='match-output'； } }); }); } 函数生成表格行（数据）{ const table=document.querySelector（“#matches”）； 水头（表）； createMatchRows（表，data.matches）； }

th{最小宽度：30px}
td.match-output{text align:center}

---

您的代码可以通过使用简化很多。我的建议是：

const fetchData=async（）=>（等待获取（'https://stryk.herokuapp.com/strycket2021'））.json（）；
fetchData（）
。然后（数据=>{
变量行='Rad:Lag:1X2'；
data.matches.forEach（e=>{
行+=`
${e.matchNumber}
${e.teams[1].name}-${e.teams[2].name}
${e.matchInfo.Output==='1'？'✓'：''}
${e.matchInfo.Output==='X'？'✓'：'''
${e.matchInfo.Output==='2'？'✓'：'''
`;
});
grid.innerHTML=行；
});
表格{
宽度：400px；
文本对齐：居中；
}
.结果{
字号：700；
颜色：绿色；
}
该url返回匹配的对象数组。您希望在表中显示哪些数据。你能举个例子吗？@Absolute初学者我用一张图片更新了我的代码，看看结果应该是什么样子。注意，在
generate\u tablerows
中使用当前的For循环结构，你只会得到1
tr
，因为在继续创建
td
s应该在