current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question
    
Are you even getting into the callback function of $.getJSON()? –  arb Nov 28 '11 at 16:55
    
Do you have http://example.com/menu.json or whatever on your webserver? –  Marc B Nov 28 '11 at 16:57
    
@MarcB - he must, if he's getting the error he describes –  Adam Rackis Nov 28 '11 at 17:03
    
if you are positive that the text of the home button is Home exact spelling, then $(".navDD").html(data[find][0]['text']); will work. If you are still not getting it then log it to the console. in chrome, console.log(data[find][0]['text']); –  Tim Joyce Nov 28 '11 at 17:58
    
I edited main post with new code. Still get an error though, as stated above. –  legobear154 Nov 28 '11 at 18:30

5 Answers 5

up vote 1 down vote accepted

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.

share|improve this answer
    
data.[find][0].text ? –  Stefan Nov 28 '11 at 16:59
    
i think that you are right but he is making an error before that $(this).text should be $(this).text() –  Nicola Peluchetti Nov 28 '11 at 17:07
up vote 1 down vote

Are you sure that this is correct?

 var find=$(this).text;

I'd do:

 var find=$(this).text();

And then 

   $.getJSON('menu.json', function(data) {
        $(".navDD").html(data.[find][0].text);
    });
share|improve this answer
    
See first post for modifications –  legobear154 Nov 28 '11 at 17:28
up vote 0 down vote

There is no find property in your object, so that's giving you undefined. You're then trying to read the 0th index of this undefined property, which is giving you the error.

If you want to access the the text property of the 0th element in the home object, you would say data.home[0].text

share|improve this answer
    
Or to be even more obvious, data["home"][0]["text"] –  Andrew Nov 28 '11 at 16:58
1  
@Andrew That would work too - I prefer using the "dot" to navigate through, but that's just my preference. –  Adam Rackis Nov 28 '11 at 16:59
up vote 0 down vote 
for (var key in data) {
    if (key == 'Home'){
        $(".navDD").html(data[key]['text']);
    }
}

you should also make sure that you are working with an object when using for loops. That might be where your 'undefined' error is coming from.

if (typeof data === 'object'){
    for (var key in data) {
        if (key == 'Home'){
            $(".navDD").html(data[key]['text']);
        }
    }
}
share|improve this answer
up vote 0 down vote

You are using var find=$(this).text to get the content of the element, you need to use var find=$(this).text() to call the text method.

You are using data.find[0].text to get a value from the object, you need to use menuData[find][0].text.

You should not request the JSON file every time the mouseenter event happens, you should only request it the first time, then hold on to it.

$(document).ready(function(){
  var menuData = null;

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

});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.