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>

Recommended Answers

All 10 Replies

Member Avatar for diafol

I don't understand why you're linking to different pages (html) if you want to stay on the same page but just load different content.
You can control nav link clicks...

$('#Navigation li a').click(function(e)
{
    e.preventDefault();
    var json = $(this).data('json');
    loadJSON(json);
});

If you had nav links like this...

<li><a href="#" data-json="desktop">Desktop</a></li>

And a function...

function loadJSON(jsonFile)
{
    $.getJSON(jsonFile + '.json', function(data){
        //etc.
    });
}

So in this example it would load desktop.json

As for the linking to different pages it was something that i tried out but did not work as i had thought.

So if you do not mind but i am new to this is that in the loadJSON function i just insert the code that i have done,and in the nav links the data-json="desktop" is calling the relvant data from the json file.

What i am a bit confused is where to insert the products.json in the function, does it have to go in the $.getJSON(jsonFile + '.json', function(data){ line, so as to read $.getJSON(jsonFile + 'products.json', function(data){.

Member Avatar for diafol

Thew jsonFile variable takes the info from the data-json attribute. So all you're doing is attaching a '.json' file extension to it to create your 'url' in the $.getJSON call.

I didn't see 'products' in your navigation div. But I assume...

<li><a href="#" data-json="products">PC products</a></li>

So...

$('#Navigation li a').click(function(e)
{
    e.preventDefault();
    var json = $(this).data('json'); //if PC products clicked json = 'products'
    loadJSON(json);
});

function loadJSON(jsonFile)
{
    $.getJSON(jsonFile + '.json', function(data){
    ...
}

so the 'url' would be products.json

The products.json is the name of the json file where all the required data is stored.

So if i understood you right, i just need to call the required json data from inside the href tag like <li><a href="#" data-json="products.pc">PC products</a></li> and so on for the different other nav links so as to get up the required data which is present in the json file.

Member Avatar for diafol
data-json="products"

Unless the json file is called products.pc.json

No the json file is called products.json, then in it are the different arrays like pc, Wii with their respective data, and in the long run when one clicks on the desktop nav link the data of the pc will be displayed and so on for the other nav links.

Member Avatar for diafol

AH! OK:

$('#Navigation li a').click(function(e)
{
    e.preventDefault();
    var json = $(this).data('json');
    loadJSON(json);
});
If you had nav links like this...

<li><a href="#" data-json="desktop">Desktop</a></li>
And a function...

function loadJSON(jsonItem)
{
    var item = jsonItem;
    $.getJSON('products.json', function(data){
        info = data[item];
        //I think that will do it
    });
}

Hi thanks for all your help, just to be sure, so if i understood right for each of the relevant nav links i just need to change the data-json="Desktop" especially the Desktop to what is thne reqired to show like data-json="Wii" to bring up the data for the Wii, while using the same LoadJSON function and the nav click control for the various nav links.

Member Avatar for diafol

Yes

Thanks a lot for all your help and support

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.