遍历JSON数组中的jQuery

我有了这个在其外部JSON文件：遍历JSON数组中的jQuery

{ 
"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" } 
] 
}

这是我的JSON文件的基本设置。我计划在我的网站扩展时添加更多内容。我正在使用它作为我的菜单栏设置的一部分。它有3个按钮，主页，游戏和论坛。当您将鼠标移到主页按钮上时，我想将“主页”中的内容转变为链接并在我的网站上显示，与“游戏”按钮相同，当您将鼠标悬停在论坛按钮上时，不会显示任何内容。我试过这个：

编辑：再次稍微改变了功能，试图阻止它在每个鼠标上调用服务器，以及遍历它们并将它们显示在.navDD div标记中。

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

我确定我还是搞砸了。现在我得到了Unsigned TypeError：无法读取未定义的属性“长度”。我不确定我做错了什么。尽管在此之前我从未使用过JSON。

有人能帮我吗？

感谢， Legobear154

来源

2011-11-28 legobear154

你甚至进入'$ .getJSON（）'的回调函数吗？ – arb

你有'http：// example.com/menu.json'或任何你的网络服务器上？ –

@MarcB - 他必须，如果他得到了错误，他描述了 –

你可以尝试做这种方式：

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

访问属性通过它的名称。这假定您正在使用的文本值与您的对象的JSON属性匹配。

我也建议在每个鼠标输入时不要做$.getJSON()。这是很多服务器流量。用户可能会“鼠标进入”数百次。

来源

2011-11-28 16:57:36 arb

数据。[find] [0] .text？ – Stefan

我认为你是正确的，但他在做出错误之前'$（this）.text'应该是'$（this）.text（）' –

有一个在你的对象没有find属性，所以这是给你undefined。然后，您正试图读取这个未定义属性的第0个索引，这会给您带来错误。

如果您要访问的主对象的第0个元素的文本属性，你会说data.home[0].text

来源

2011-11-28 16:55:33

或者更明显的是，'data [“home”] [0] [“text”]' – Andrew

@Andrew这也会起作用 - 我更喜欢用“点”来浏览，但这只是我的偏好。 –

for (var key in data) { 
    if (key == 'Home'){ 
     $(".navDD").html(data[key]['text']); 
    } 
}

您还应该确保在使用for循环时使用对象。这可能是你的'未定义'错误来自何处。

if (typeof data === 'object'){ 
    for (var key in data) { 
     if (key == 'Home'){ 
      $(".navDD").html(data[key]['text']); 
     } 
    } 
}

来源

2011-11-28 17:00:59

您确定这是正确的吗？

var find=$(this).text;

我会怎么做：

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

然后

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

来源

2011-11-28 17:02:00

查看修改的第一篇文章 – legobear154

您正在使用var find=$(this).text获取该元素的内容，你需要使用var find=$(this).text()调用text方法。

您正在使用data.find[0].text从对象中获取值，您需要使用menuData[find][0].text。

每当发生事件时您都不应该请求JSON文件，您应该只在第一次请求时，然后坚持下去。

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

});

来源

2011-11-28 17:13:33 Guffa

遍历JSON数组中的jQuery

回答

相关问题