Convert UL LI to multidimensional Array

Having an indefinite number of lists, let’s say 3:

<ul class="data-wrapper">
 <li class="item-name"><strong>Los Angeles</strong></li>
 <li class="item-lat">34.052235</li>
 <li class="item-lng">-118.243683</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Santa Monica</strong></li>
 <li class="item-lat">34.024212</li>
 <li class="item-lng">-118.496475</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Redondo Beach</strong></li>
 <li class="item-lat">33.849182</li>
 <li class="item-lng">-118.388405</li>
</ul>

Is there a way to get this Array:

(3) [Array(3), Array(3), Array(3)]

0: Array(3)
0: "</strong>Los Angeles</strong>"
1: 34.052235
2: -118.243683

1: Array(3)
0: "</strong>Santa Monica</strong>"
1: 34.024212
2: -118.496475

2: Array(3)
0: "</strong>Redondo Beach</strong>"
1: 33.849182
2: -118.388405

I came up with this

var array_items = $('.data-wrapper li').remove().map(function () {
    return this;
}).get();

var array = [array_items];

Or this

var array = [];
$('.data-wrapper li').each(function(i, elem) {
    array.push($(elem).text());
});

But I’m not getting exactly what I need, including the coordinates as numbers, or to keep the <strong> tag

Answer

Use jQuery’s .get() with JS’s Array.prototype.map

const arr2D =
  $(".data-wrapper").get().map((el) => $(el).children().get().map(el => $(el).html()));

console.log(arr2D)
<ul class="data-wrapper">
 <li class="item-name"><strong>Los Angeles</strong></li>
 <li class="item-lat">34.052235</li>
 <li class="item-lng">-118.243683</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Santa Monica</strong></li>
 <li class="item-lat">34.024212</li>
 <li class="item-lng">-118.496475</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Redondo Beach</strong></li>
 <li class="item-lat">33.849182</li>
 <li class="item-lng">-118.388405</li>
</ul>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Example using pure JS:

const EL_dataWrapper = document.querySelectorAll(".data-wrapper");
const arr2D = [...EL_dataWrapper].map(EL => [...EL.children].map(EL => EL.innerHTML));

console.log(arr2D);
<ul class="data-wrapper">
 <li class="item-name"><strong>Los Angeles</strong></li>
 <li class="item-lat">34.052235</li>
 <li class="item-lng">-118.243683</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Santa Monica</strong></li>
 <li class="item-lat">34.024212</li>
 <li class="item-lng">-118.496475</li>
</ul>

<ul class="data-wrapper">
 <li class="item-name"><strong>Redondo Beach</strong></li>
 <li class="item-lat">33.849182</li>
 <li class="item-lng">-118.388405</li>
</ul>

If you need only the text value use EL.textContent insetad of EL.innerHTML