I'm struggling to integrate some JSON data into an HTML page using "Vanilla Javascript," but I'm unsure of how to proceed. Can you please provide assistance? I can share the HTML, CSS code, and an example of the JSON data I want to incorporate into the HTML page.
The JSON data resides in multiple locations within the HTML files, and I need to connect it with my HTML content, but I lack the knowledge on how to achieve this!
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 chosen 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>
The JSON data that needs to be integrated:
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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56372522163725227835393b">[email protected]</a>",
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",
...
],
friends: [
{
id: 0,
name: "Shields Terrell"
},
{
id: 1,
name: "Hilary Bruce"
},
...
]
}