javascript/jquery value .get().attr()

Question

I'm struggling with how is it possible to get the data-value of these multiple classes?

$(function() {
  getUserName();
});

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").get(i));
    console.log($("div.YoutubePlaylist").get(i).attr('data-username'));
    console.log($("div.YoutubePlaylist").get(i).attr('data-playlist'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

Answer 1

Simplify your code through .each() and .data()

$(document).ready(function(){
    $('.YoutubePlaylist').each(function(){
        console.log($(this).data('username'));
        console.log($(this).data('playlist'));
    });
});

Working snippet:-

$(document).ready(function() {
  $('.YoutubePlaylist').each(function() {
    console.log($(this).data('username'));
    console.log($(this).data('playlist'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

Answer 2

The get() method returns DOM object so attr() method doesn't work with it. To get jQuery object use eq() method and apply attr() method on that.

$(function() {
  getUserName();
});

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").eq(i).attr('data-username'));
    //                                ---^^^^^----
    console.log($("div.YoutubePlaylist").eq(i).attr('data-playlist'));
    //                                ---^^^^^----
  }
};

$(function() {
  getUserName();
});

function getUserName() {
  var o = $('div.YoutubePlaylist').length;
  for (var i = 0; i < o; i++) {
    console.log($("div.YoutubePlaylist").eq(i).attr('data-username'));
    console.log($("div.YoutubePlaylist").eq(i).attr('data-playlist'));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

In the above code, you can make some modification for better performance(caching reference, using data() method etc).

$(function() {
  var $o = $('div.YoutubePlaylist'); // cache the refernece
  for (var i = 0; i < $o.length; i++) {
    console.log($o.eq(i).data('username')); // get data atribute value
    console.log($o.eq(i).data('playlist'));
  }
});

$(function() {
  var $o = $('div.YoutubePlaylist');
  for (var i = 0; i < $o.length; i++) {
    console.log($o.eq(i).data('username'));
    console.log($o.eq(i).data('playlist'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

---

You can simplify the code by using jQuery each() method, which helps to iterate over jQuery element collection.

$(function() {
  $('div.YoutubePlaylist').each(function() {
    console.log($(this).attr('data-username'));
    // or use 
    // console.log($(this).data('username'));
    // console.log(this.dataset['username'])
    console.log($(this).attr('data-playlist'));
    // or use 
    // console.log($(this).data('playlist'));
    // console.log(this.dataset['playlist'])
  })
});

$(function() {
  $('div.YoutubePlaylist').each(function() {
    console.log($(this).attr('data-username'));
    // or use 
    // console.log($(this).data('username'));
    // console.log(this.dataset['username'])
    console.log($(this).attr('data-playlist'));
    // or use 
    // console.log($(this).data('playlist'));
    // console.log(this.dataset['playlist'])
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

Answer 3

You can use map to get an array of attribute values

var output = $("div.YoutubePlaylist").map((i, v) => $(v).attr("data-username")).get();

Demo

var output = $("div.YoutubePlaylist").map((i, v) => $(v).attr("data-username")).get();
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>

If multiple values need to be returned, then map can return an object itself

var output = $("div.YoutubePlaylist").map((i, v) => ({
  username: $(v).attr("data-username"),
  playlist: $(v).attr("data-playlist")
})).get();

Demo

var output = $("div.YoutubePlaylist").map((i, v) => ({
  username: $(v).attr("data-username"),
  playlist: $(v).attr("data-playlist")
})).get();
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myYoutubePlaylist">
  <div class="YoutubePlaylist" data-username="Username1" data-playlist="PlaylistID1" style="height: 20px; width; 20px; background-color: red;"></div>
  <div class="YoutubePlaylist" data-username="Username2" data-playlist="PlaylistID2" style="height: 20px; width; 20px; background-color: blue;"></div>
  <div class="YoutubePlaylist" data-username="Username3" data-playlist="PlaylistID3" style="height: 20px; width; 20px; background-color: green;"></div>
</div>