I am trying to load different data which are all in one JSON data from a drop down menu to a div area on the web page (eg if one clicks PC on the menu then the items related to PC in the json file will load and if Wii is clicked the relevant items are loaded) which would be refreshed with the new results.
I have manged to get the data and show it in the div area without using the drop down menu, but cannot find a way to call the required data using the navigation menu.
The below code is used to display part of the json data from the json file that is present which is working when i load the web page, but what i need is that when the user clicks on the required item menu the relevant json data will be displayed.
I even tried to load the required data in different pages, but was ending up with the same data being shown although in the $.each(data.pc, function (key, val) i was calling the required area by declaring it in the data. area.
I would appreciate any help as i am stuck and do not know what i am doing wrong.
$(function loadpc()
{
$(document).ready(function () { // load json file using jquery ajax
$.getJSON('PCproducts.json', function (data) {
var output = '<div id="row">';
var count = 1;
$.each(data.pc, function (key, val) {
output += '<div id="holding-area">';
output += '<div id="img-area">' +
'<img id="img" src="'+val.imgpath+'" alt="'+ val.title +'" /></div>';
output += '<div id="info">';
output += '<h2>' + val.title + '</h2>';
output += '<p>' + val.category + '</p>';
output += '<p>' + val.develop + '</p>';
output += '<p>' + val.released + '</p>';
output += '<p>' + val.price + '</p>';
output += '<p>' + val.quantity + '</p>';
output += '<p><input type="submit" value="Add to cart" class="btn" /></p>'
output += '</div>';
output += '</div>';
if(count%2 == 0){
output += '</div><div id="row">'
}
count++;
});
output += '</div>';
$('#content-2-1').html(output); // replace all existing content
});
});
});
The below is the part of the drop down navigational menu which is relevant to the above code.
<div id="Navigation">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="Platforms.html">Games <span class="caret"></span></a>
<div>
<ul>
<li><a href="Desktop.html">Desktop</a></li>
<li><a href="DS.html">DS</a></li>
<li><a href="3DS.html">3DS</a></li>
<li><a href="Wii.html">Wii</a></li>
<li><a href="WiiU.html">Wii U</a></li>
<li><a href="PS4.html">PS4</a></li>
<li><a href="PS3.html">PS3</a></li>
<li><a href="PSV.html">PSP/PS Vita</a></li>
<li><a href="Xbox.html">Xbox </a></li>
<li><a href="Xbox1.html">Xbox One</a></li>
<li><a href="Xbox360.html">Xbox 360</a></li>
<li><a href="Retro.html">Retro</a></li>
</ul>
</div>
</li>
