--------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1 id="heading" class="A B C">Playing with DOM - 2020</h1>
<div class="class" id="green">class1</div>
<ul class="this">
<li class="list">this</li>
<li class="list">is</li>
<li class="list">my</li>
<li class="list">dream</li>
</ul>
<div class="class" id="white">class2</div>
<div class="class" id="red">class3</div>
<div class="class" id="blue">class4</div>
</div>
<form action="noaction.php">
<input type="text" name="input" id="input1" />
<input type="SUBMIT" id="btn" value="Submit" />
<!-- <button id="btn">Submit</button> -->
<br>
<a href="//google.com">Google</a> <br>
<a href="//facebook.com">Fb</a><br>
<a href="//codewithharry.com">CWH</a><br>
<a href="//gmail.com">Gmail</a><br>
</form>
<h2>Learning Fetch API</h2>
<button class="btn" id="myBtn" >Fetch data</button>
<div class="secondcontainer" id="defs">
<ul class="head" id = "head"> <b>Top Heading</b>
<!-- dynamic from js -->
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
index.js:
--------
console.log("here");
jsonText = {
body: [
{
user_id: "abcdef1234ghi",
name: "Mock Holliday",
email: "mock.holliday@example.com",
birthdate: "1971-08-01T00:00:00+00:00",
},
{
user_id: "jfwfjk",
name: "Mocklliday",
email: "mock.hoay@example.com",
birthdate: "1971-08-00+00:00",
},
{
user_id: "jfwfjk",
name: "Mocklliday",
email: "mock.hoay@example.com",
birthdate: "1971-08-00+00:00",
},
{
user_id: "jfwfjk",
name: "Mocklliday",
email: "mock.hoay@example.com",
birthdate: "1971-08-00+00:00",
},
{
user_id: "jfwfjk",
name: "Mocklliday",
email: "mock.hoay@example.com",
birthdate: "1971-08-00+00:00",
}
]
};
// console.log(jsonText.body[0])
// console.log(jsonText.body[1]);
// const checkJSON = JSON.parse(jsonText);
// console.log(checkJSON);
let fetchData = document.getElementById("myBtn");
let head = document.getElementById("head");
fetchData.addEventListener('click',()=>{
console.log("clicked")
populate()
})
function populate(){
let results = jsonText.body;
let html=``
results.forEach(element => {
html += `
<li>${element.user_id}</li>
`;
console.log(element);
});
head.innerHTML = html
}
0 Comments