我正在尝试使用“Vanilla Javascript”文件将我在 json 中的一些 .json 数据连接到 html 页面，但我不知道该怎么做。你能帮我么 ？我将给出我试图在 html 页面中使用的 html、css 代码和 json 数据的示例。
您会在 HTML(json 数据)中找到很多地方。这是我想使用 json 数据的地方，我必须将它与我的 html 页面连接起来，但我不知道该怎么做 !!!
h1 {
text-align: center;
}
ul {
list-style: none;
}
.flexcontainer {
display: flex;
align-items: center;
}
.container {
padding-top: 1%;
padding-bottom: 1%;
margin-top: 1%;
margin-bottom: 1%;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Employee's Page</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<h1>Name of the choosen person</h1>
<div class="container" style="border:1px solid #cecece;">
<div class="flexcontainer">
<div>
<img src="http://placehold.it/350x250" alt="">
</div>
<div>
<ul>
<li>
<h3>Full name: (Json Data)</h3>
</li>
<li>
<h3>Gender: (Json Data)</h3>
</li>
<li>
<h3>Phone number: (Json Data)</h3>
</li>
<li>
<h3>Company: (Json Data)</h3>
</li>
<li>
<h3>Address: (Json Data)</h3>
</li>
</ul>
</div>
</div>
<div>
<h3>About employee:</h3>
<p>(Json Data)</p>
</div>
<div>
<h3>Employee was registered in the system: (Json Data)</h3>
</div>
</div>
</body>
<script src="./assets/js/json.js"></script>
</html>我要使用的json数据
json data
[
{
_id: "5af5cf0270d455a211200d4c",
isActive: true,
balance: "$3,507.97",
picture: "http://placehold.it/32x32",
age: 24,
eyeColor: "brown",
name: "Random Name",
gender: "male",
company: "AST",
email: "ast@ast.com",
phone: "+1 88888888",
address: "661 Terrace Place, Elliott, Ohio, 9927",
about:
"Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
registered: "2014-12-10T07:18:10 +02:00",
latitude: -84.359436,
longitude: 156.008804,
tags: [
"excepteur",
"eiusmod",
"laboris",
"fugiat",
"minim",
"dolor",
"qui"
],
friends: [
{
id: 0,
name: "Shields Terrell"
},
{
id: 1,
name: "Hilary Bruce"
},
{
id: 2,
name: "Lorraine Torres"
}
]
}最佳答案
你去吧:
const json = [
{
_id: "5af5cf0270d455a211200d4c",
isActive: true,
balance: "$3,507.97",
picture: "http://placehold.it/32x32",
age: 24,
eyeColor: "brown",
name: "Random Name",
gender: "male",
company: "AST",
email: "ast@ast.com",
phone: "+1 88888888",
address: "661 Terrace Place, Elliott, Ohio, 9927",
about:
"Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
registered: "2014-12-10T07:18:10 +02:00",
latitude: -84.359436,
longitude: 156.008804,
tags: ["excepteur", "eiusmod", "laboris", "fugiat", "minim", "dolor", "qui"],
friends: [
{
id: 0,
name: "Shields Terrell"
},
{
id: 1,
name: "Hilary Bruce"
},
{
id: 2,
name: "Lorraine Torres"
}
]
},
{
_id: "5af5cf0254f91fa2d555e1ae",
isActive: false,
balance: "$2,219.42",
picture: "http://placehold.it/32x32",
age: 27,
eyeColor: "blue",
name: "Ryan Evans",
gender: "male",
company: "ast",
email: "ast@ast.com",
phone: "+1 8888888888",
address: "595 Foster Avenue, Villarreal, Massachusetts, 4604",
about:
"Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\r\n",
registered: "2015-07-08T01:24:50 +03:00",
latitude: -38.471736,
longitude: -158.491974,
tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"],
friends: [
{
id: 0,
name: "Dina Berger"
},
{
id: 1,
name: "Carmella Mckinney"
},
{
id: 2,
name: "Campbell Wooten"
}
]
}
];
document.getElementById("name").innerHTML = `${json[0].name}`;
document.getElementById("fullname").innerHTML = `${json[0].name}`;
document.getElementById("gender").innerHTML = `${json[0].gender}`;
document.getElementById("phone").innerHTML = `${json[0].phone}`;
document.getElementById("company").innerHTML = `${json[0].company}`;
document.getElementById("address").innerHTML = `${json[0].address}`;
document.getElementById("about").innerHTML = `${json[0].about}`;
document.getElementById("registered").innerHTML = `${json[0].registered}`;h1 {
text-align: center;
}
ul {
list-style: none;
}
.flexcontainer {
display: flex;
align-items: center;
}
.container {
padding-top: 1%;
padding-bottom: 1%;
margin-top: 1%;
margin-bottom: 1%;
}<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<h1><span id="name"></span></h1>
<div class="container" style="border:1px solid #cecece;">
<div class="flexcontainer">
<div>
<img src="http://placehold.it/350x250" alt="">
</div>
<div>
<ul>
<li>
<h3>Full name: <span id="fullname"></span></h3>
</li>
<li>
<h3>Gender: <span id="gender"></span></h3>
</li>
<li>
<h3>Phone number: <span id="phone"></span></h3>
</li>
<li>
<h3>Company: <span id="company"></span></h3>
</li>
<li>
<h3>Address: <span id="address"></span></h3>
</li>
</ul>
</div>
</div>
<div>
<h3>About employee:</h3>
<p><span id="about"></span></p>
</div>
<div>
<h3>Employee was registered in the system: <span id="registered"></span></h3>
</div>
</div>
</body>
</html>这是 CodeSandbox 上的演示:https://codesandbox.io/s/24n50lmlqy
关于javascript - 将 json 数据连接到 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52675323/