迭代与对象键嵌套的数组

时间:2013-08-14 22:09:15

标签: javascript arrays loops object

var html = {
easyBB :   
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb:
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png'],
easyBB2:
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb2 : 
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png'],
easyBB3 :
['easybbtutorials','www.easybbtutorials.com','http://i76.servimg.com/u/f76/17/83/35/07/easybb10.png'],
AvacWeb3 : 
['AvacWeb','www.avacweb.com','http://i45.servimg.com/u/f45/16/35/08/55/new_lo12.png']
};
 var cont = document.getElementById('container');
  for(var key in html){
   for(var i =0;i<key.length;i++ ){
     var name= '<span class="name">'+html[key][0] +'</span>',
     link = '<span class="url"><a href="'+html[key][1]+'">'+html[key][1] +'</a></span>',
     image = '<img src="'+html[key][2]+'" title="'+html[key][0]+'" />';        
     cont.innerHTML= '<div class="wrapper">'+ name + '<br />'+image+'<br />'+link+'</div>';
      i++;
   }
 }

我正在尝试迭代我创建的HTML对象的每个键中的数组问题不确定如何做到这一点我现在尝试了多种方式而且我相信(因为我发布)我这样做是错的。我也尝试过:html[key[i]][0]当然我得到的错误是我没有定义。任何建议我做错了,截至目前它只发布一个数组到html。

3 个答案:

答案 0 :(得分:4)

问题不在于迭代,而是行

cont.innerHTML = ...

每次循环迭代时替换内容,以便您只看到最终项目(“AvacWeb3”)。

将其更改为

cont.innerHTML += ...

并摆脱不需要的for (var i =0 ...循环。 (jsfiddle

答案 1 :(得分:0)

for(var i = 0; i < html[key].length; i++){
...

答案 2 :(得分:0)

你应该做html [key] [i] [0]。
而你也应该做Trevor所说的,html [key] .length而不是key.length。

通过将html [key]分配给var currentkey,让自己变得更容易,例如,更容易跟踪。

另外,请查看array.forEach,只是为了好玩;)