Отображает только один элемент из массива

Question

С помощью следующего кода при нажатии на гиперссылку он загружает элементы массива в div-контент бренда. Когда вы нажимаете гиперссылку Nike, например, она загружает только элемент 3 из массива, а элементы 1 и 2 отсутствуют?

<?php 
$brand = array (
"nike" => array (
      array('logo'=>'images/nike.png', 'description' =>'some nike text1'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text2'), 
      array('logo'=>'images/nike.png', 'description' =>'some nike text3')), 
"puma" => array(
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text'), 
      array('logo'=>'images/puma.png', 'description' =>'some puma text')), 
"addidas" => array(
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'), 
      array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')), 
"Asics" => array(
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text'), 
      array('logo'=>'images/Asics.png', 'description'=>'some Asics text')), 
"Qicksilver" => array(
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'), 
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'), 
      array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')), 
); 
    ?> 

<style type="text/css"> 
    a { 
     margin-left: 10px; 
    } 
    #brand-content { 
     margin-top: 50px; 
     border: solid 1px #000; 
     padding: 10px; 
     display: none; 
     width: 50%; 
    } 
    #brand-content img { 
     margin-right: 25px; 
    } 

</style> 

<script>var brand =<?php echo json_encode($brand) ?>;// json_encode($brand) is equivalent to the following:  {"nike":[{"logo":"images\/nike.png","description":"some nike text"},  {"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"}, {"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}, {"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]} 

    function readyLinks() { 
     for (var n in brand) { 
      for (var i in brand[n]) { 
       var link = document.createElement("a"); 
       link.href = brand[n][i].logo; 
       link.innerHTML = n; 
       link.setAttribute("data-description", brand[n][i].description); 
       link.onclick = function() { 
        document.getElementById("brand-content").innerHTML = "<img src=\"" + this.href + "\"/>" + this.getAttribute("data-description"); 
        document.getElementById("brand-content").style.display = "block"; 
        return false; 
       } 
      } 
      document.getElementById("brand-nav").appendChild(link); 
     } 
    } 


    window.onload = function() { 
     readyLinks(); 
    } 

</script> 

<!-- body --> 

<div id="brand-nav"></div> 

<div id="brand-content"></div> 

Фактический массив, который я буду использовать будет иметь следующий вид:

"Nike" => array( 
     array('id'=>'01','logo'=>'images/nike-logo.jpg', 'productTitle' => "Nike Air Max",'productImage' => "images/airmax.jpg",'productDescription' => "Nike Air Max are awesome ",'rrp' => "RRP £100.00",'salePrice' => "Now ONLY £80.00"), 

    array('id'=>'02','logo'=>'images/nike-logo.jpg', 'productTitle' => "Nike Plus Running Shoes",'productImage' => "images/plus.jpg",'productDescription' => "Nike plus are even more awesome ",'rrp' => "RRP £120.00",'salePrice' => "Now ONLY £90.00"), 

Так что мне нужно добавить дополнительные GetAttributes для дополнительных полей в массиве для все, чтобы отобразить?

this.getAttribute("id"); 
this.getAttribute("productTitle"); 
this.getAttribute("productDescription"); 

Volterony

Answer 1

function readyLinks() 
{ 
for (var n in brand){ 
for (var i in brand[n]){ 
var link = document.createElement("a"); 
link.href = brand[n][i].logo; 
link.innerHTML = n; 
link.setAttribute("data-description",brand[n][i].description); 

link.onclick = function(){ 
document.getElementById("brand-content").innerHTML = "<img src=\""+this.href+"\"/>" + this.getAttribute("data-description"); 
document.getElementById("brand-content").style.display = "block"; 
return false;} 
document.getElementById("brand-nav").appendChild(link); 
}}} 

Answer 2

function readyLinks() 
    { 
    var company, link; 
    for (company in brand) 
    { 
    link = document.createElement("a"); 
    link.innerHTML = company; 
    link.LogoDescription_Arr=brand[company]; 
    link.onclick = function() 
     { 
     var container=document.getElementById("brand-content"); 
     var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item; 
     var outPutHTML="";   
     for (i=0;i<l;i++) 
     { 
     item=LogoDescription_Arr[i]; 
     outPutHTML+= "<img src=\""+item.logo+"\"/>" + item.description; 
     } 
     container.innerHTML=outPutHTML;   
     container.style.display = "block"; 
     return false; 
     } 
    document.getElementById("brand-nav").appendChild(link); 
    } 
    }