2017-10-24 8 views
2

私はRaphaëlフレームワークを使って動的な図形を描画しています(これにより、clickeableになります)。配列にアクセスする

アレイに正しくアクセスできません。

私が作成した配列:あなたは彼らと対話できるように、彼らはオブジェクトのようなものです

sieges["1"] = assembly.path("M236.51 ... 108"); 
sieges["2"] = assembly.path("M483.51 ... 71"); 
sieges["3"] = assembly.path("M427.51 ... 272"); 
sieges["4"] = assembly.path("M135.51 ... 348"); 
sieges["5"] = assembly.path("M617.51 ... 413"); 

var siegeurs = { 

    1 : [{   
      "Nom" : "User1", 
      "Photo" : "url" 
      }], 
    2 : [{ 
      "Nom" : "User2", 
      "Photo" : "url" 
      }], 
    3 : [{  
      "Nom" : "User3", 
      "Photo" : "url" 
      }], 
    4 : [{  
      "Nom" : "User4", 
      "Photo" : "url" 
      }], 
    5 : [{   
      "Nom" : "User5", 
      "Photo" : "url" 
      }] 
}; 

これらは、そのフレームワークのドロー形状です。

これはループです:

for(var siegeNum in sieges) { 
(function (siege) { 
    siege.attr(style); //apply style to shapes 

    siege[0].addEventListener("mouseover", function() { 
     siege.animate(hoverStyle, animationSpeed); //add hoverstyle when hovered 

     //The line I can't figure out 
     document.getElementById("textelement").innerHTML = siegeurs[siegeNum]["Nom"]; 
     //The line I can't figure out 


    }, true); 

    siege[0].addEventListener("mouseout", function() { 
     siege.animate(style, animationSpeed); 
     document.getElementById("textelement").innerHTML = baseTxt; 
    }, true); 

}) 
(sieges[siegeNum]); 
} 

textelementは、私は形状が推移したとき変更しようとする基本的なテキストです。 実際には、図形の上を移動すると、テキストは「未定義」になります。

私はちょうどチェックするためにこの方法を実行しようとしました:

document.getElementById("textelement").innerHTML = siegeurs[siegeNum]; 

しかし、私は置くと、テキストは、[オブジェクトのオブジェクト]に行きます。

何か助けていただければ幸いです。

答えて

2

あなたsiegeursオブジェクトの各値は、配列なので、必要な内部プロパティ"Nom"のようにアクセスされるべきである:それは作品

... 
document.getElementById("textelement").innerHTML = siegeurs[siegeNum][0]["Nom"]; 
+0

!しかし、なぜシエージュの後ではなく[siegeNum]と["Nom"]の間に[0]を入れなければならないのですか? – Lawris

+1

JavaScriptの配列はオブジェクトとしても扱われるので、この代替の 'siegeurs [siegeNum] [0] .Nom'を追加することもできます – Thielicious

関連する問題