Javascript , How can I get all values from tag attributes into an array?

Question

Actually, I need two arrays, from two attributes, "id_play" and "orden_play".

I share my code here:

let id_play = [];
let orden_play = [];

id_play = $("#listaOrdenable").children().attr('id_play');
orden_play = $("#listaOrdenable").children().attr('orden_play');

<ul id="listaOrdenable" class="s1">
  <li orden_play="0" id_play="47"><img src="uploads/meade.jpg"  width="40" heigth="40">1</li>
  <li orden_play="1" id_play="49"><img src="uploads/videoIcon.png"  width="40" heigth="40">2</li>
  <li orden_play="2" id_play="50"><img src="uploads/RARA.jpg"  width="40" heigth="40">3</li>
  <li orden_play="3" id_play="51"><img src="uploads/videoIcon.png"  width="40" heigth="40">4</li>
</ul>

You should be careful about adding arbitrary custom attributes to your HTML documents as it makes them invalid although they will render just fine in most of the cases I am aware of. See [Can I add custom attribute to HTML tag?](https://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag) — benvc, Nov 24 '18 at 21:30
It seems bad design to want to store attributes that relate to each other in different arrays. I suppose you will then use the index in those arrays to know which belongs with which. It would be better if you would create *one* array, of objects, where each object has those two properties. — trincot, Nov 24 '18 at 21:46

score 0 · Answer 1 · answered Nov 24 '18 at 21:29

Here my solution:

id_play = []
orden_play = []

$("#listaOrdenable").children('li').each(function(){
    id_play.push(this.getAttribute('id_play'));
    id_play.push(this.getAttribute('orden_play'));
});

score 0 · Answer 2 · answered Nov 24 '18 at 21:31

I'm using jQuerys $.each to access each attribute in the list. I've added 2 loops at the end of the code for verification. You can get rid of them if you don't need it

let id_play = [];
let orden_play =[];

$.each($('#listaOrdenable').children(), function(i,v){
    id_play.push($(this).attr('id_play'));
    orden_play.push($(this).attr('orden_play'));
});

//You can remove these two loops if you don't need them
for(var i in id_play) {
    console.log(id_play[i]);
}
for(var x in orden_play) {
    console.log(orden_play[x]);
}

score 0 · Answer 3 · answered Nov 24 '18 at 21:32

I have a plain javascript solution:

const arr1 = [].map.call(document.getElementById('listaOrdenable').querySelectorAll('li'), li => li.getAttribute('orden_play'))

const arr2 = [].map.call(document.getElementById('listaOrdenable').querySelectorAll('li'), li => li.getAttribute('id_play'))

What I am basically doing is selecting all the li nodes from the ul and I map over them and grab the desired attribute. The purpose of [].map.call is that querySelectorAll() returns a NodeList which is an Array like structure. It doesn't have all the array functions, so the .call approach I used is a way of using array functions on array like structures.

I haven't tested it in jQuery, but I presume that the .children() function will return what querySelectorAll() returns in my example.

Hope this helps, cheers!

nemanja · Answer 4 · 2018-11-25T03:35:43.950

The simplest possible pure JS solution:

let id_play = [].slice.call(document.querySelectorAll("li[id_play]"));
let orden_play = [].slice.call(document.querySelectorAll("li[orden_play]"));

This approach is using David Walsh's proposal to convert NodeList to Array. You can also use Array.from(). See this link.

But, I have to add one more. This is by far the most elegant way, using ES6 spread operator.

ES6 solution:

let id_play = [...(document.querySelectorAll("li[id_play]"))];
let orden_play = [...(document.querySelectorAll("li[orden_play]"))];

score 0 · Answer 5 · answered Nov 24 '18 at 21:40

You can use JQuery each on all the children of element listaOrdenable, and then push the attributes you are looking for on the related arrays. Check the next example:

$(document).ready(function()
{
    var id_play = [];
    var orden_play = [];

    $("#listaOrdenable").children().each(function()
    {
        id_play.push($(this).attr("id_play"));
        orden_play.push($(this).attr("orden_play"));
    });
    
    console.log(id_play);
    console.log(orden_play);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="listaOrdenable" class="s1">
  <li orden_play="0" id_play="47"><img src="uploads/meade.jpg"  width="40" heigth="40">1</li>
  <li orden_play="1" id_play="49"><img src="uploads/videoIcon.png"  width="40" heigth="40">2</li>
  <li orden_play="2" id_play="50"><img src="uploads/RARA.jpg"  width="40" heigth="40">3</li>
  <li orden_play="3" id_play="51"><img src="uploads/videoIcon.png"  width="40" heigth="40">4</li>
</ul>

In the case, you want to save the elements as integer numbers, you have to use the next code:

id_play.push(Number($(this).attr("id_play")));
orden_play.push(Number($(this).attr("orden_play")));

score 0 · Answer 6 · answered Nov 24 '18 at 21:40

0

id_play = [] orden_play = []

$("#listaOrdenable li").each(function() { id_play.push($(this).attr('id_play')); id_play.push($(this).attr('orden_play')); });

answered Nov 24 '18 at 21:40

Onur İnci

118
1
8

score 0 · Accepted Answer · answered Nov 24 '18 at 21:43

let id_play = [];
let orden_play = [];

const children = $("#listaOrdenable").children().map((childId, child) => child.attributes);
const getAttrFromChild = (attr) => children.get().map(child => child[attr].value);

id_play = getAttrFromChild("id_play")
orden_play = getAttrFromChild("orden_play")

console.log(id_play, orden_play)

Javascript , How can I get all values from tag attributes into an array?

7 Answers7