i want to display the json data the user has put in, but it isn't showing anything. when i press the button nothing happens. my json file is named varer.json. i want to show all the json data in a tabel when i press the button. I dont get an error, there is just nothing that happens, can it be something with the fetch??? please help
here is my javascript
function showData() {
console.log("Showing Data")
// var mainData = document.getElementById("jsonData");
// mainData.innerHTML="hello"
fetch("varer.jsom")
.then(response => {
resp = response.json()
return resp
})
.then(resp => {
appendData(resp)
})
}
function appendData(resp){
console.log(resp)
var mainDiv = document.getElementById("jsonData");
for (i=0; i< resp.length; i++)
{
var nameDiv = document.createElement("div")
nameDiv.className="collapsible"
nameDiv.innerHTML = "Name: " + resp[i].varer
var ageDiv = document.createElement("div")
ageDiv.className="content"
ageDiv.innerHTML = "Age: " + resp[i].pris
var picture = document.createElement("div")
picture.className="content"
picture.innerHTML = "Age: " + resp[i].billede
mainDiv.appendChild(nameDiv)
mainDiv.append(ageDiv)
mainDiv.append(picture)
nameDiv.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
// if (content.style.maxHeight){
// content.style.maxHeight = null;
// } else {
// content.style.maxHeight = content.scrollHeight + "px";
// }
});
}
}
Here is my html.
<html>
<head>
<script type="module" src="varer.js"></script>
<title>JSON Test</title>
</head>
<body>
<div class="title">Expand / Collapse JSON</div>
<div id="jsonData">
</div>
<h1>Varer</h1>
<form id="form">
<input placeholder="Varer" id="varer" />
<input placeholder="pris" id="pris" />
<input type="file" id="billede" name="img" accept="image/*">
<input value="Submit" type="submit" id= "submit" />
<button onclick="showData()">Click me</button> </form>
<form id="delete">
<input value="Delete" type="submit" />
</form>
</body>
</html>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment