Question

I have an external JSON file that has this in it:

{
"Home": [
    { "link":"index.php" , "text":"Home" }, 
    { "link":"index.php?page=aboutus" , "text":"About Us" }
]
"Games": [
    { "link":"games.php" , "text":"All Games" }, 
    { "link":"games.php?name=game" , "text":"Game" }
]
}

That is the basic setup of my JSON file. I plan on adding more as my site expands. I am using that as part of my menu bar setup. It has 3 buttons, Home, Games, and Forum. When you mouse over the Home button I want to turn the stuff in “Home” into links and show it up on my site, same with the Games button, nothing is going to show up when you mouse over the Forum button. I have tried this:

Edit: changed the function slightly again, trying to keep it from calling the server on each mouse over, as well as loop through them all and show them in the .navDD div tag.

$(document).ready(function(){
    var menu
    $.getJSON('menu.json', function(data) {
        menu = data;
    });
    $(".navlink").mouseenter(function(){
        var find=$(this).text();
        $.each(data,function(index){
            $(".navDD").html(menu[find][index]['text']);
        });
    });
});

I am sure I mess something up still. Now I getUncaught TypeError: Cannot read property ‘length’ of undefined. I am not sure at all what I am doing wrong. Though I have never worked with JSON before this.

Could someone please help me?

Thanks,
Legobear154

Answer 1

You could try doing it this way:

$(".navlink").mouseenter(function(){
    var find=$(this).text;
    $.getJSON('menu.json', function(data) {
        $(".navDD").html(data[find][0].text);
    });
});

Access a property via it’s name. This is assuming that the text value you are using matches the JSON property of your object.

I would also suggest not doing the $.getJSON() on every mouse enter. That is a lot of server traffic. Users could be “mouse entering” hundreds of times.