I am making a simple website which consists of products (Laptop, CCTV).it has only single page.i want when i click on (Laptop link in should display Laptop items stored in JSON and same case For CCTV products.
Problem.
- first time when i click on link it does not show anything when i click 2,3 times on link it show products.but preventdefualt not working.
2.where should i apply preventDefault() event and how.
Here Is my HTML CODE For 2 links.
<a
href="displayproducts.html"
onloadeddata="fetchproducts('CCTV')"
;
>CCTV CAMERAS</a
>
<a
href="displayproducts.html"
onloadeddata="fetchproducts('Laptop')"
>Laptop and COMPUTERS</a
>
Here Is my js Code which handle that event and using AJAX AND JSON should return data(returning correctly).
function fetchproducts(product, event) {
console.log(product);
//your read json code
var xhr = new XMLHttpRequest();
xhr.open("get", "/jsondata/Products.json");
xhr.onload = function (event) {
console.log();
event.preventDefault();
var obj = JSON.parse(this.responseText);
try {
if (product === "CCTV") {
fillProducts(obj.CCTV);
} else if (product === "Laptop") {
fillProducts(obj.Laptop);
} else if (product == "Biometric") {
fillProducts(obj.Biometric);
}
} catch (error) {
console.log("some_error_occur");
}
};
xhr.send();
}