Necesito crear una matriz de matrices como esta:
var serviceCoors = [ [50, 40], [50, 50], [50, 60], ];de elementos con datos:
<div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>Estoy intentando esto:
var test = []; $('.service-points__map').each(function () { var test2 = $(this).contents(); var items = []; $.each(test2, function(i, val) { items.push(val.data); }); test.push(items); });Pero no funciona. Tengo 2 matrices, pero están vacías.
Oh, lo que hiciste fue... var test2 = $(this).contents(); no es lo correcto que necesita usar. Deberías usar .data() y desestructurar el objeto :
var test = []; $('.service-points__map').each(function() { var { longitude, latitude } = $(this).data(); test.push([longitude, latitude]); }); console.log(test); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>Obtuve la salida como:
[ [ 20, 10 ], [ 10, 20 ] ]Inicialmente, iba a sugerir el método de map de jQuery pero, aparentemente por diseño , aplana automáticamente la salida que solo se puede resolver anidando sus coordenadas en otra matriz. También parece que coacciona automáticamente cadenas a números, lo cual es útil en su caso, pero parece estar tomando muchas decisiones que quizás no desee.
const out = $('div').map((i, el) => { const { latitude, longitude } = $(el).data(); return [[ latitude, longitude ]]; }).toArray(); console.log(out); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>Native JS no tiene este problema. Simplemente tome los elementos e itere sobre ellos devolviendo la nueva matriz de coordenadas anidadas.
const divs = document.querySelectorAll('div'); const coords = Array.from(divs).map(div => { const { latitude, longitude } = div.dataset; return [ +latitude, +longitude ]; }); console.log(coords); <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>Documentación adicional
Alternativamente, puede usar JS simple en lugar de jQuery. Todo lo que necesita hacer es obtener elementos, iterarlos, crear una matriz de los atributos de cada elemento e insertarlo en la matriz de test .
const test = []; const items = document.querySelectorAll('.service-points__map'); items.forEach(item => { test.push([ parseInt(item.getAttribute('data-latitude')), parseInt(item.getAttribute('data-longitude')), ]); }); console.log(test); <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>