map multiple div elements into array

Question

Faced with mapping problem, it returns for me a blank array with two empty elements. Having a button where on click it gets related div block, then I'm trying to get type and number and push them into array. What I am doing wrong here?

<div class="chapter">
    <div class="span">
        <div class="contact">
            <span class="type">
                2
            </span>
            <span class="number">
                1111111111
            </span>
        </div>
        <div class="contact">
            <span class="type">
                4
            </span>
            <span class="number">
                33333333333
            </span>
        </div>
    </div>
</div>

function func(el) {
    let block = $(el).closest("div.chapter")
    let arr = $(block.find('.contact')).map(function () {
        let val = $(this).find('.type, .number').val();
        return val;
    }).get();

    console.log(arr) //result: ["", ""]
}

palaѕн · Accepted Answer · 2020-03-14 13:17:47Z

The .val() method is primarily used to get the values of form elements such as input, select and textarea. You need to use text() method for this, as text() string containing the combined text of matched elements.

Using .val() on span element:

console.log( $('.type').val() )
// Return empty string
console.log( typeof $('.type').val() )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="type">2</span>

Using .text() on span element:

console.log( $('.type').text() )
// Returns '2'
console.log( typeof $('.type').text() )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="type">2</span>

Also call them individually for each element like this:

let arr = block.find('.contact').map(function() {
   let type = $(this).find('.type').text().trim();;
   let number = $(this).find('.number').text().trim();;
   return { type, number};
}).get();

This will return you array of objects, where each object has text content of type & number class elements.

DEMO:

let arr = $('.span').find('.contact').map(function() {
   let type = $(this).find('.type').text().trim();
   let number = $(this).find('.number').text().trim();
   return { type, number};
}).get();

console.log( arr )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span">
    <div class="contact">
        <span class="type">
            2
        </span>
        <span class="number">
            1111111111
        </span>
    </div>
    <div class="contact">
        <span class="type">
            4
        </span>
        <span class="number">
            33333333333
        </span>
    </div>
</div>

Mamun · Accepted Answer · 2020-03-14 13:15:55Z

Your code does not match with the HTML markup you have provided. You can simply loop through all the element with class contact and find the element inside with specific class to from the object.

Please Note: The span element does not have the value property, you have to use .text().

function func() {
  let arr = $('.contact').map(function () {
    return  {
        type: +$(this).find('.type').text().trim(),   //find text and convert to number using +
        number: +$(this).find('.number').text().trim()//find text and convert to number using +
    }
  }).get();

  console.log(arr);
}
func();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span">
    <div class="contact">
        <span class="type">
            2
        </span>
        <span class="number">
            1111111111
        </span>
    </div>
    <div class="contact">
        <span class="type">
            4
        </span>
        <span class="number">
            33333333333
        </span>
    </div>
</div>

pascal nembot · Accepted Answer · 2020-03-14 13:20:22Z

0

you can use simple JavaScript it's easy!

document.querySelectorAll(".contact").forEach((elm)=>{
        arr=[] ;
        arr.push(elm.children[0].innerText);
        arr.push(elm.children[1].innerText);

        console.log(arr)
    })

answered Mar 14, 2020 at 13:20

pascal nembot

1

1 Comment

David Dombrowsky Over a year ago

The original post used map(), which I think was part of the point of the question. Also, it looks like the $(...).get() isn't correct (if I'm reading the code correctly).

Collectives™ on Stack Overflow

map multiple div elements into array

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related