CODEWITHSUNDEEP
javascripthtmlarrays
ChippeRockTheMurph
ChippeRockTheMurph

Reputation: 455

Creating an Array of Id's

I have an array, var players = ['', '', '', '', '', ''];. Now I want that array to contain 6 items from a list:

    <ul id="Available Players">
        <li id="node7">Player A</li>
        <li id="node8">Player B</li>
        <li id="node9">Player C</li>
        <li id="node10">Player D</li>
        <li id="node11">Player E</li>
        <li id="node12">Player F</li>
    </ul>

Now, I want the array to look kinda like this: var players = [.node7, .node8, .node9, .node10, .node11, .node12];. Also, if I were to create a new array called round1, can I get the values of the first 4 values from the players array? It should look somewhat similar to this: var round1 = [players[0], players[1], players[2], players[3]];

So how can I do all of this?

Upvotes: 0

Views: 3430

Answers (5)

Vikas Mahajan
Vikas Mahajan

Reputation: 355

  var players=[];  
  var round1=[];  
  var items=$("#Available_Players li")  
   items.each(function(){  
    console.log($(this));  
    players.push('.'+$(this)[0].id);
   });

  round1 = players.slice(0, 4);  
  console.log(players);  
  console.log(round1);

https://plnkr.co/edit/PxvzROhFotj0p4UKMCC4?p=preview

Upvotes: 0

kind user
kind user

Reputation: 41893

You can use following approach.

var parent = document.getElementById('Available Players'), //get the 'ul' element
    round1 = [], // create 'round1' array
    players = Array.from(parent.children).map(function(v){ //get all the 'li' elements
      return "." + v.id; //return 'id' attribute of every 'li' element 
    });
    for (var i = 0; i < 4; i++){ // push only four first elements from 'players' array 
      round1.push(players[i]); // to the 'round1' array
    }
    
    console.log(players); //reveal the results
    console.log(round1);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

Upvotes: 1

gyre
gyre

Reputation: 16779

You can use the element.children property to get a list of every li inside your ul, and then use Array#map to get their id. Then, use players.slice(0, 4) to get your round1 players.

It is unclear from your question whether you want players to hold the names of each player, the li elements themselves, or the id of each li element. Here is how you would get all three:

var nodes = [].slice.call(
  document.getElementById('Available Players').children
)

function prop (o) { return o[this] }

var nodeIds = nodes.map(prop, 'id')

var playerNames = nodes.map(prop, 'textContent')

console.log(nodes)
console.log(nodeIds)
console.log(playerNames)

var players = nodeIds // or whichever array above you meant

var round1 = players.slice(0, 4)

console.log(round1)
.as-console-wrapper { min-height: 100vh; }
<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

Upvotes: 0

caisah
caisah

Reputation: 2087

HTML:

<ul id="available-players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

Javascript:

var players = [];
var li = document.querySelectorAll('#available-players li');

for (var i = 0; i < li.length; i++) {
  players.push(li[i].getAttribute('id'));  
}

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386560

You could get the node of the parent id, and then all list elements and extract the id.

var nodes = document.getElementById('Available Players').getElementsByTagName('li'),
    ids = Array.prototype.map.call(nodes, function(a) {
        return '.' + a.getAttribute('id');
    }),
    round1 = ids.slice(0, 4);
  
console.log(ids);
console.log(round1);
<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

Upvotes: 1

Related Questions