Javascript 如何将JS数据转换成HTML？

我正在尝试将JSON数据转换为HTML。所以我使用了JSON数据并将其变为变量，然后我分配了更多的变量来访问JSON数据中我想要的每个元素的数据。现在，我的数据以变量的形式存在，但我无法使用document.getElementById将其传递到HTML。这可能是因为我对同一个变量有不同的数据，所以只有最后一个元素为Id打印出来，因为它是唯一的。所以，请帮助我如何将JS变量数据打印成HTML

var obj=[{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“你好”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
},
{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“欢迎”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
},
{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“帮助我”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
}
];
用于（obj中的var i）{
var type=obj[i]。类型；
var text=obj[i]。text；
var source_team=obj[i]。source_team；
var user\u profile=obj[i]。user\u profile；
var real\u name=用户配置文件。real\u name；
console.log（source\u team+“：”+真实姓名）；
console.log（文本）；
document.getElementsByClassName（'a1'）。innerHTML=text；
}

将JSON格式的字符串转换为JavaScript对象。

下面是一个如何将其放入简单表格的示例。通常，您可以使用

.innerHTML

或

.innerText

属性向HTML动态添加项目：

var obj=[{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“你好”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
},
{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“欢迎”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
},
{
“客户信息id”：“3a223f8d-b5aa-4c9c-9b63-045ec6f90b58”，
“类型”：“消息”，
“文本”：“帮助我”，
“来源团队”：“TN4AF0V5W”，
“团队”：“TN4AF0V5W”，
“用户配置文件”：{
“真名”：“奇迹莫希尼斯99”，
“团队”：“TN4AF0V5W”
}
}
];
用于（obj中的var i）{
var type=obj[i]。类型；
var text=obj[i]。text；
var source_team=obj[i]。source_team；
var user\u profile=obj[i]。user\u profile；
var real\u name=用户配置文件。real\u name；
var message=document.createElement（“tr”）；
message.innerHTML=
“”+类型+
“”+文本+
“”+source\u团队+
“”+用户配置文件+
“+真实姓名+”；
document.getElementsByClassName（'a1'）[0]。追加（消息）；
}

表，th，td{
边框：1px纯黑；
}

类型
正文
源团队
用户配置文件
真名

尝试将obj中的

变量i

更改为

让i进入obj

否，这没有帮助。

getElementsByClassName（'a1'）

返回一个“类似数组”的对象。因此，尝试更改该对象的

innerHTML

属性将不起作用。我只是想说清楚。您想根据JSON中的内容动态生成新元素，还是想修改现有元素？如果您使用getElement ByClassName，然后尝试将array.innerHTML设置为文本，则需要使用getElement而不是getElement

让obj的i

迭代对象的属性，

i

是属性。我们可以像一个在另一个下面一样线性打印它吗？我的意思是我们可以通过取消表格样式来完成吗？当然，您只需更改HTML的结构方式。因此，不要使用

table

和

td

元素，而是使用

div

s或类似的东西。我再次遇到问题。对于（obj中的var I）{var type=obj[I]。type；var text=obj[I]。text；var source\u team=obj[I]。source\u team；var user\u profile=obj[I].user_profile；var real_name=user_profile.real_name；var message=document.createElement（“tr”）；message.innerHTML=+type++text+source_team++user_profile++real_name；document.getElementsByClassName（'a1'）[0]。追加（消息）；}