jQuery каждый и сопоставить новый объект на основе атрибута данных

Question

Я пытаюсь извлечь все идентификаторы из нескольких элементов на основе атрибута data.

Вот мой HTML:

<div class="row"> 
    <div class="item" data-element='{"id":1, "name":"John"}'>John</div> 
    <div class="item"></div> 
</div> 
<div class="row"> 
    <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div> 
    <div class="item"></div> 
</div> 

и JavaScript:

var result = []; 
$('[data-element]').each(function() { 
    result = $(this).data('element'); 
}); 

$.map(result, function(val, i) { 
    console.log(val) 
}); 

Проблема заключается в том, что я получаю только последний элемент. В журнале консоли отображается 2 Peter.

То, что я хотел бы быть конечный результат всех идентификаторов, а также имена, добываемых в виде массива, как:

id = [1,2] 
name = ['John', 'Peter'] 

Answer 1

Начните с пустых массивов и нажмите каждое значение в соответствующий массив в пределах одного цикла. Вы, кажется, более усложняя его

var arrObj={ id:[], name:[] }; 
 

 
$('[data-element]').each(function() { 
 
    var data = $(this).data('element'); 
 
    arrObj.id.push(data.id); 
 
    arrObj.name.push(data.name); 
 
}); 
 

 
console.log(JSON.stringify(arrObj,null,' '))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="item" data-element='{"id":1, "name":"John"}'>John</div> 
 
    <div class="item"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div> 
 
    <div class="item"></div> 
 
</div>

Если у вас есть много свойств и хотел каждое значение свойства в массиве можно запустить другой внутренний цикл по свойствам вместо того, чтобы вручную писать каждый толчок , что-то вроде:

$.each(data, function(key, value){ 
    arrObj[key].push(value); 
}) 

Answer 2

Вы должны использовать функцию mapвнутриeach у вас есть:

var result = []; 
 
var id = []; 
 
var name = []; 
 
$('[data-element]').each(function() { 
 
    result = $(this).data('element'); 
 
    
 
    id[id.length] = result.id; 
 
    name[name.length] = result.name; 
 
    
 
    $.map(result, function(val, i) { 
 
    console.log(val) 
 
    }); 
 
    
 
}); 
 

 
console.log(id) 
 
console.log(name)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="item" data-element='{"id":1, "name":"John"}'>John</div> 
 
    <div class="item"></div> 
 
</div> 
 
<div class="row"> 
 
    <div class="item"data-element='{"id":2, "name":"Peter"}'>Peter</div> 
 
    <div class="item"></div> 
 
</div>

В противном случае - функция each перемещается по всем вашим элементам, а когда цикл завершен - значение в result - это значение последнего элемента с атрибутом [data-element] (и вы привязываете функцию к этому результату).

Основываясь на том, что вы хотите получить - я не уверен, что вам даже нужна функция map. В моем коде проверьте использование result.id и result.name.

Answer 3

Вы устанавливаете пустой массив значением $(this).data('element') на каждой итерации вашего цикла ForEach. Таким образом, последняя итерация всегда будет значением result, когда вы ее оцените. Используйте методы Array для добавления элементов в массив вместо его установки; поэтому вместо result = $(this).data('element'); это должно быть result.push($(this).data('element'));