CODEWITHSUNDEEP
javascriptjqueryhtmljson
legobear154
legobear154

Reputation: 431

Loop through JSON array in jquery

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

Upvotes: 1

Views: 1641

Answers (5)

Guffa
Guffa

Reputation: 700342

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);
      });
    }
  });

});

Upvotes: 0

Tim Joyce
Tim Joyce

Reputation: 4517

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']);
        }
    }
}

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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);
    });

Upvotes: 1

arb
arb

Reputation: 7863

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.

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83356

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

Upvotes: 0

Related Questions