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"}]]

这就是我开始迷路的地方（如果我还没有迷路的话）......当我尝试从推送对象中获取字符串时，我不断得到一个未定义的对象。

$.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

var merge = [],
i = 0;
$.each(catUri,function(){
    merge.push({
        catUri: catUri[i].catUri,
        catKey: catKey[i].catKey
    });
    i++;
});

输出：

[
    {
        catUri: "//test.com//test1",
        catKey: "test1"
    },
    {
        catUri: "//test.com//test2",
        catKey: "test2"
    }
]

JSFiddle 示例：http: //jsfiddle.net/7RXjw/

Answer 2

因此，从您的示例中，我推断出catUri并catKey通过索引关联，并且您希望将每个位置的元素从一个位置合并到另一个位置。

var merge = $.map(catUri, function(value, index) {
   return $.extend(value, catKey[index]);
});

那会给你

[{catUri: '//test.com/test1', catKey: 'test1' }, {catUri: '//test.com/test2', catKey: 'test2'}]

http://jsfiddle.net/HakedByChinese/vm69c/

Answer 3

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

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/