javascript - 使用 .push 对对象进行分组，然后输出到字符串

Question

这是一个非常菜鸟的问题，但我的愚蠢的大脑无法解决这个问题。

我有 2 个数组:

var catUri = [
  { catUri : "//test.com//test1" },
  { catUri : "//test.com//test2" }
];

var catKey = [
  { catKey : "test1" },
  { catKey : "test2" }
];

我正在尝试加入数组，然后从每个对象中获取字符串来创建 html，如下所示...

<h2>Test</h2>
<ul>
  <li><a href="//test.com//test1" title="test1">test1</a></li>
  <li><a href="//test.com//test2" title="test2">test2</a></li>
</ul>

我尝试了这样的合并:

var merge = [];
merge.push(catUri, catKey);

返回结果:

[[Object { catKey="Test1"}, Object { catKey="Test2"}], [Object { catUri="//test.com//test1"}, Object { catUri="//test.com//test2"}]]

这就是我开始迷失的地方(如果我还没有迷失的话)...当我尝试从推送对象获取字符串时，我不断得到一个 undefined object 。

$.each(merge, function(){
  var str = '<li><a href="' + this.catUri + '" title="' + this.catKey + '">' + this.catKey + '<\/a><\/li>';
  console.log(str);
});

返回结果:

<li><a href="undefined" title="undefined">undefined</a></li>
<li><a href="undefined" title="undefined">undefined</a></li>

循环访问普通对象会返回我预期的结果。

$.each(catKey, function(){
  var str = '<li>' + this.catKey + '</li>';
  console.log(str);
});

<li>test1</li>
<li>test2</li>

我可能没有正确合并这些对象。很感谢任何形式的帮助。

Answer 1

为什么需要合并这些数组？简单的单独迭代怎么样？

for (var i = 0; i < catUri.length; i++) {
    var uri = catUri[i].catUri;
    var key = catKey[i].catKey;
    $("<li />").append($("<a />").attr({
        title : key,
        href : uri
    }).text(key)).appendTo("ul");
}

演示: http://jsfiddle.net/Yya2m/