Как создать массив из атрибута данных нескольких элементов в JS ES6? - PullRequest
Новая
       2

Как создать массив из атрибута данных нескольких элементов в JS ES6?

0 голосов
/ 04 ноября 2019

Я пытаюсь создать массив из атрибутов данных нескольких элементов в надлежащем JS ES6.

Давайте использовать следующий HTML-код: 

<div class="item" data-geo="['Bondi Beach', -33.890542, 151.274856, 4]">
<div class="item" data-geo="['Coogee Beach', -33.923036, 151.259052, 5]">
<div class="item" data-geo="['Cronulla Beach', -34.028249, 151.157507, 3]">
<div class="item" data-geo="['Manly Beach', -33.80010128657071, 151.28747820854187, 2]">
<div class="item" data-geo="['Maroubra Beach', -33.950198, 151.259302, 1]">

Я хочу получить данныеатрибут ('data-geo', формат JSON) из каждого элемента и превратить его в массив в JS, например, так: 

  var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1],
  ];

Нашел много примеров в jQuery, но ни одного в JS ES6.

1 Ответ

2 голосов
/ 04 ноября 2019

Использование набора данных 

var locations = []

document.querySelectorAll('[data-geo]').forEach(el =>
    locations.push(JSON.parse(el.dataset.geo.replace(/'/g, '"')))
)

console.log(locations)
<div class="item" data-geo="['Bondi Beach', -33.890542, 151.274856, 4]">
<div class="item" data-geo="['Coogee Beach', -33.923036, 151.259052, 5]">
<div class="item" data-geo="['Cronulla Beach', -34.028249, 151.157507, 3]">
<div class="item" data-geo="['Manly Beach', -33.80010128657071, 151.28747820854187, 2]">
<div class="item" data-geo="['Maroubra Beach', -33.950198, 151.259302, 1]">
...