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;

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 ... — eisbehr
– eisbehr, Commented Sep 28, 2016 at 8:33

eisbehr · Accepted Answer · 2016-09-28 09:28:46Z

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>

baao · Accepted Answer · 2016-09-28 08:26:07Z

1

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#

edited Sep 28, 2016 at 8:26

answered Sep 28, 2016 at 8:22

baao

73.5k18 gold badges152 silver badges208 bronze badges

1 Comment

Andreas Over a year ago

$($('.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()

Collectives™ on Stack Overflow

Array: Put multple objects in array

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related