遍歷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

回答

相關問題