Javascript 将json数据与html页面连接

我试图使用“香草Javascript”文件将json中的一些.json数据连接到html页面，但我不知道如何实现。你能帮帮我吗？我将给出html、css代码和我试图在html页面中使用的json数据示例

您可以在许多地方的HTML（json数据）中找到。这就是我想要使用json数据的地方，我必须将它与我的html页面连接起来，但我不知道如何做到这一点

h1{
文本对齐：居中；
}
保险商实验室{
列表样式：无；
}
.flexcontainer{
显示器：flex；
对齐项目：居中；
}
.集装箱{
垫面：1%；
垫底：1%；
利润率最高：1%；
利润底部：1%；
}

员工页面
所选人员的姓名


全名：（Json数据）


性别：（Json数据）


电话号码：（Json数据）


公司：（Json数据）


地址：（Json数据）


关于员工：
（Json数据）

员工已在系统中注册：（Json数据）

我遇到的类似问题是我使用AJAX获取数据。在此之前，请阅读文档对象模型（DOM）和AJAX的概念来解决这个问题

DOM-

---

AJAX-

我面临的类似问题是我使用AJAX获取数据。在此之前，请阅读文档对象模型（DOM）和AJAX的概念来解决这个问题

DOM- AJAX-

好了：

const json=[
{
_id:“5af5cf0270d455a211200d4c”，
是的，
结余：“$3507.97”，
图片：“http://placehold.it/32x32",
年龄:24岁，
眼睛颜色：“棕色”，
名称：“随机名称”，
性别：“男性”，
公司：“AST”，
电子邮件：“ast@ast.com",
电话：“+1888888”，
地址：“俄亥俄州埃利奥特市特雷斯广场661号，邮编9927”，
关于：
“我的劳动是劳动的劳动。我的劳动是劳动的劳动。我的劳动是劳动的劳动。我的罪魁祸首是非腐败的劳动。我的劳动是劳动的劳动，我的劳动是劳动的劳动。我的精英是劳动的动物，我的劳动是劳动的劳动。我的软体动物是劳动的劳动作为一个例外，不作为一个例外，不作为一个例外，不作为一个例外，不作为一个例外。\r\n“，
注册：“2014-12-10T07:18:10+02:00”，
纬度：-84.359436，
经度：156.008804，
标签：[“例外”、“eiusmod”、“laboris”、“fugiat”、“minim”、“dolor”、“qui”]，
朋友们：[
{
id:0，
姓名：“谢尔兹·特雷尔”
},
{
id:1，
姓名：“希拉里·布鲁斯”
},
{
id:2，
姓名：“洛林·托雷斯”
}
]
},
{
_id:“5af5cf0254f91fa2d555e1ae”，
I：错，
结余：“$2219.42”，
图片：“http://placehold.it/32x32",
年龄:27岁，
眼睛颜色：“蓝色”，
姓名：“Ryan Evans”，
性别：“男性”，
公司：“ast”，
电子邮件：“ast@ast.com",
电话：“+1888888”，
地址：“马萨诸塞州比利亚雷尔福斯特大道595号，邮编4604”，
关于：
“在合同和劳动合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务。在合同中履行义务时，履行义务。在合同中履行义务。在合同中履行义务时，履行义务。\r\n”，
注册：“2015-07-08T01:24:50+03:00”，
纬度：-38.471736，
经度：-158.491974，
标签：[“mollit”、“minim”、“duis”、“anim”、“aute”、“magna”、“ut”]，
朋友们：[
{
id:0，
姓名：“迪娜·伯杰”
},
{
id:1，
姓名：“Carmella Mckinney”
},
{
id:2，
名称：“坎贝尔伍腾”
}
]
}
];
document.getElementById（“name”）.innerHTML=`${json[0].name}`；
document.getElementById（“全名”）.innerHTML=`${json[0].name}`；
document.getElementById（“性别”）.innerHTML=`${json[0].gender}`；
document.getElementById（“phone”）.innerHTML=`${json[0].phone}`；
document.getElementById（“company”）.innerHTML=`${json[0].company}`；
document.getElementById（“地址”）.innerHTML=`${json[0]。地址}`；
document.getElementById（“about”）.innerHTML=`${json[0].about}`；
document.getElementById（“已注册”）.innerHTML=`${json[0]。已注册}`
h1{
文本对齐：居中；
}
保险商实验室{
列表样式：无；
}
.flexcontainer{
显示器：flex；
对齐项目：居中；
}
.集装箱{
垫面：1%；
垫底：1%；
利润率最高：1%；
利润底部：1%；
}

包裹沙箱


全名：


性别：


电话号码：


公司：


地址:


关于员工：

员工已在系统中注册：
好了：


const json=[
{
_id:“5af5cf0270d455a211200d4c”，
是的，
结余：“$3507.97”，
图片：“http://placehold.it/32x32",
年龄:24岁，
眼睛颜色：“棕色”，
名称：“随机名称”，
性别：“男性”，
公司：“AST”，
电子邮件：“ast@ast.com",
电话：“+1888888”，
地址：“俄亥俄州埃利奥特市特雷斯广场661号，邮编9927”，
关于：
“我在劳动合同上签字。我在劳动合同上签字。我在劳动合同上签字。我在劳动合同上签字。我在劳动合同上签字。我在劳动合同上签字，我在劳动合同上签字。我在劳动合同上签字，我在劳动合同上签字。我在劳动合同上签字，我在劳动合同上签字。我在劳动合同上签字，我在劳动合同上签字