Javascript 如何将JSON从API加载到html表中（转置）

对web开发来说是相当新的。我需要一些关于将JSON转换为表（转置）的帮助

我想从API调用中检索以下格式的JSON

{'name': John
 'age': 18
 'enrolled': ['math','science','english']
} 

并将此转换为

|---------------------|-----------------------------|
|      name           |     John                    |
|---------------------|-----------------------------|
|      age            |       18                    |
|---------------------|-----------------------------|
|      enrolled       | ['math','science','english']|
|---------------------|-----------------------------|

---

未处理中心对内容进行证明，但您可以通过以下方式转换矩阵并设置其格式：

将JSON转换为矩阵

换位行和列

使用字符串值创建格式化矩阵

使用显示值计算每列的宽度

格式化要打印的矩阵

let数据=[
{“姓名”：“约翰”，“年龄”：77，“注册”：[“科学]}，
{“姓名”：“保罗”，“年龄”：79岁，“注册”：[“数学”，]}，
{“姓名”：“乔治”，“年龄”：76岁，“注册”：[“英语”]}，
{“姓名”：“林戈”，“年龄”：79岁，“注册”：[“音乐”]}
]
设矩阵=转置矩阵（jsonToMatrix（数据））
document.body.appendChild（矩阵可抽取（矩阵））；
日志（formatMatrix（矩阵））；
函数jsonToMatrix（jsonData）{
让keys=Object.keys（jsonData[0]）
返回[keys，…jsonData.map（item=>keys.map（key=>item[key]））]
}
函数转置矩阵（矩阵）{
返回矩阵[0].map（（列，i）=>matrix.map（行=>row[i]））
}
函数矩阵可抽取（矩阵）{
让tableEl=document.createElement（'table'）
matrix.forEach（行=>{
让trEl=document.createElement（'tr'）
row.forEach（列=>{
设tdEl=document.createElement（'td'）
tdEl.textContent=col
trEl.appendChild（tdEl）
});
表1.追加儿童（trEl）
})
返回表
}
函数格式矩阵（矩阵）{
让formattedValues=matrix.map（row=>row.map（col=>''+JSON.stringify（col）+''）
设colWidths=formattedValues[0]。映射（col=>0）
formattedValues.forEach（行=>{
row.forEach（（列，索引）=>{
if（列长>列宽[索引]）{
colWidths[索引]=列长度
}
})
})
让width=colWidth.reduce（（总计，colWidth）=>total+colWidth，0）
让分隔符='+'+colWidths.map（colWidth=>'-'.repeat（colWidth））.join（'+'）+'+'+'\n'
返回[
分离器，
formattedValues.map（行=>{
返回[
'|',
row.map（（列，索引）=>col.padEnd（列宽[索引]，“”））.join（“|”），
“|\n”
].加入（“”）
}).连接（分隔符），
分离器
].加入（“”）
}

表{边框折叠：折叠；}
表，td{边框：细实心灰色；}
td{padding:0.25em；}

没有处理中心对内容进行证明，但您可以通过以下方式转置和格式化矩阵：

将JSON转换为矩阵

换位行和列

使用字符串值创建格式化矩阵

使用显示值计算每列的宽度

格式化要打印的矩阵

let数据=[
{“姓名”：“约翰”，“年龄”：77，“注册”：[“科学]}，
{“姓名”：“保罗”，“年龄”：79岁，“注册”：[“数学”，]}，
{“姓名”：“乔治”，“年龄”：76岁，“注册”：[“英语”]}，
{“姓名”：“林戈”，“年龄”：79岁，“注册”：[“音乐”]}
]
设矩阵=转置矩阵（jsonToMatrix（数据））
document.body.appendChild（矩阵可抽取（矩阵））；
日志（formatMatrix（矩阵））；
函数jsonToMatrix（jsonData）{
让keys=Object.keys（jsonData[0]）
返回[keys，…jsonData.map（item=>keys.map（key=>item[key]））]
}
函数转置矩阵（矩阵）{
返回矩阵[0].map（（列，i）=>matrix.map（行=>row[i]））
}
函数矩阵可抽取（矩阵）{
让tableEl=document.createElement（'table'）
matrix.forEach（行=>{
让trEl=document.createElement（'tr'）
row.forEach（列=>{
设tdEl=document.createElement（'td'）
tdEl.textContent=col
trEl.appendChild（tdEl）
});
表1.追加儿童（trEl）
})
返回表
}
函数格式矩阵（矩阵）{
让formattedValues=matrix.map（row=>row.map（col=>''+JSON.stringify（col）+''）
设colWidths=formattedValues[0]。映射（col=>0）
formattedValues.forEach（行=>{
row.forEach（（列，索引）=>{
if（列长>列宽[索引]）{
colWidths[索引]=列长度
}
})
})
让width=colWidth.reduce（（总计，colWidth）=>total+colWidth，0）
让分隔符='+'+colWidths.map（colWidth=>'-'.repeat（colWidth））.join（'+'）+'+'+'\n'
返回[
分离器，
formattedValues.map（行=>{
返回[
'|',
row.map（（列，索引）=>col.padEnd（列宽[索引]，“”））.join（“|”），
“|\n”
].加入（“”）
}).连接（分隔符），
分离器
].加入（“”）
}

表{边框折叠：折叠；}
表，td{边框：细实心灰色；}
td{padding:0.25em；}

看看这个解决方案：这能回答您的问题吗？不。我想把桌子调换一下。此外，我还试图找到如何从api调用加载JSON？不。我想把桌子调换一下。此外，我还试图找到如何从api调用加载JSON。谢谢。这很有帮助。@jon

matrixToTable

函数从矩阵构建一个表。谢谢。这很有帮助。@jon

matrixToTable

函数从矩阵构建一个表。