группировка объектов с .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"}]] 

Вот где я начинаю заблудиться (если я еще не потерялся) ... Когда я пытаюсь получить строку из объекта push, я продолжаю получать неопределенный объект.

$.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/HackedByChinese/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"); 
} 

DEMO:http://jsfiddle.net/Yya2m/