Vad är felet?
Hur avhjälpa?
Htmlkod
Kod: Markera allt
<!DOCTYPE html>
<html>
<head>
<title>Mat-lista</title>
</head>
<body>
<header>
<h1>Matlista</h1>
<button id="btn"> Fetch matlista</button>
</header>
<div id="to-buy"></div>
<script src="mat.js"></script>
</body>
</html>
Kod: Markera allt
//https://www.youtube.com/watch?v=rJesac0_Ftw
var Container = document.getElementById("to-buy");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'mat.json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
};
ourRequest.send();
});
function renderHTML(data) {
var htmlString = "";
for (i=0; i < data.length; i++) {
if (data[i].Antal !== 0 && data[i].Mat !== "") {
htmlString+="<p>"+data[i].Mat + " " + data[i].Antal + "st"+ "</p>";
}
}
Container.insertAdjacentHTML('beforeend', htmlString);
}
Kod: Markera allt
[
{
"Mat": "\u00c4pple",
"Antal": 7.0
},
{
"Mat": "Mango",
"Antal": 1.0
},
{
"Mat": "Brysselk\u00e5l",
"Antal": 0.0
},
{
"Mat": "Blommk\u00e5l",
"Antal": 2.0
},
{
"Mat": "F\u00e4nk\u00e5l",
"Antal": 2.0
},
{
"Mat": "R\u00f6dbettor",
"Antal": 0.0
},
{
"Mat": "Potatis",
"Antal": 0.0
},
{
"Mat": "L\u00f6k",
"Antal": 0.0
},
{
"Mat": "Vitl\u00f6k",
"Antal": 0.0
},
{
"Mat": "",
"Antal": ""
},
{
"Mat": "Mjuk br\u00f6d",
"Antal": 2.0
},
{
"Mat": "H\u00e5rt br\u00f6d",
"Antal": 0.0
},
{
"Mat": "Skorpor",
"Antal": 0.0
},
{
"Mat": "",
"Antal": ""
},
{
"Mat": "K\u00f6ttf\u00e4rs",
"Antal": 0.0
},
{
"Mat": "Fisk",
"Antal": 0.0
},
{
"Mat": "Fiskblock",
"Antal": 0.0
},
{
"Mat": "Renskav",
"Antal": ""
},
{
"Mat": "",
"Antal": ""
},
{
"Mat": "H-papper",
"Antal": 0.0
},
{
"Mat": "T-papper",
"Antal": 0.0
},
{
"Mat": "",
"Antal": ""
},
{
"Mat": "Mj\u00f6lk",
"Antal": 3.0
},
{
"Mat": "Yougurt",
"Antal": 0.0
},
{
"Mat": "",
"Antal": ""
},
{
"Mat": "Saltgurka",
"Antal": 0.0
},
{
"Mat": "R\u00f6dbettor",
"Antal": 0.0
}
]