Array: Put multple objects in array

Question

i am having a function like below

 var resultObject = {
 testResult: $('.test').map(function() {
 return {name: $(this).text(), no:'1'};
 }).get()
 };
 
 console.log(resultObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test2">1</div>
<div class="test2">2</div>
<div class="test2">3</div>http://stackoverflow.com/questions/ask#

The field "no" should be according to the class="test2"but it doesn't seem like i can do something like .map() in .map()

Big Updated!!

I see there are so many answer below and most of them can solve the issues and I just figured out a way to fix my problem too.

Please let me share it and see if there's anything else i shall improve.

var test1= ""; 
$(".test" ).each(function( index ) {
 test1 = $(this).text();
});
var test2= $('.test2').map(function() {
 return {name: $(this).text(), no:test1};
}).get()
var sovCategories = test2; 

• eisbehr: I'm glad you found a solution for you. But rethink if one of the posted answers is better for you. You use two loops with each and map where one loop would be do the same thing ...

Answer 1

You don't need a second loop. You can use .eq() to select the element by the same index.

var resultObject = {
 testResult: $('.test').map(function(i) {
 return {
 name: $(this).text(), 
 no: $('.test2').eq(i).text(), 
 };
 }).get()
};
console.log(resultObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test2">1</div>
<div class="test2">2</div>
<div class="test2">3</div>

And just because I had fun, a bit shorter version as arrow function too! ;)

var resultObject = {
 testResult: $('.test').map((i, e) => ({
 name: $(e).text(), 
 no: $('.test2').eq(i).text()
 })).get()
};
console.log(resultObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test2">1</div>
<div class="test2">2</div>
<div class="test2">3</div>

Answer 2

You can use below to find the div by the number of the iteration, however this might not be the best thing to do. See below the snippet..

var resultObject = {
 testResult: $('.test').map(function(i) {
 return {name: $(this).text(), no: $('.test2').eq(i).text()};
 }).get()
 };
 
 console.log(resultObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test2">1</div>
<div class="test2">2</div>
<div class="test2">3</div>http://stackoverflow.com/questions/ask#

---

Instead of doing above, better change your html and use data-attributes.

<div class="test" data-no="1">test1</div>
<div class="test" data-no="2">test2</div>
<div class="test" data-no="3">test3</div>

Doing it like this, you will be able to pull the data much easier:

var resultObject = {
 testResult: $('.test').map(function(i) {
 return {name: $(this).text(), no: $(this).data("no")};
 }).get()
 };
 
 console.log(resultObject);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="test" data-no="1">test1</div>
 <div class="test" data-no="2">test2</div>
 <div class="test" data-no="3">test3</div>
 <div class="test2">1</div>
 <div class="test2">2</div>
 <div class="test2">3</div>http://stackoverflow.com/questions/ask#

• Andreas: $($('.test2')[i]).text(): get a set of jQuery objects, unwrap one of them and re-wrap it in a jQuery object O.o -> var test2Elements = $(".test2"); test2Elements.eq(i).text()