How to separate data from arrays into rows?

Question

How to separate data from arrays into rows?

Navigation

#1 by (4 votes)
#2 by (3 votes)

3

I would like to ask you another help: I have a two-dimensional array, and I wanted to separate it in lines in a column, for example:

Time 1
Jogador 1
Jogador 2
...

Time 2
Jogador 7
Jogador 8
...

I came up with the following code:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
	i++;
  $('body').append('<ul>Time '+i+'</ul><li>'+a+'</li>');
})

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

How would you sort the code? Thanks!

javascript jquery array

asked by anonymous 27.09.2018 / 02:48

2 answers

3

You are traversing the array with each , and the a variable represents, at each iteration, a array with the team players.

When you play the entire array a within li , you are putting all players in the same list item.

The correct way is to go through this array a and put each player in its own li . I also changed the name of the variable a to make it clearer what it is (an array representing a team).

In addition, the text "Time x" should be out of ul as indicated by @sam response . An alternative would be to throw it out, making each team part of another ul external.

That is, the structure looks like this:

<ul>
  <li>Time 1<li>
  <li>
    <ul>
      <li>Jogador 1</li>
      <li>Jogador 2</li>
      ...
    </ul>
  </li>
  <li>Time 2<li>
  <li>
    <ul>
      <li>Jogador 7</li>
      <li>Jogador 8</li>
      ...
    </ul>
  </li>
</ul>

In jQuery it looks like this:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

// criar lista externa (que vai ter todos os times)
$('body').append('<ul id="lista-times" style="list-style: none">');

// para cada time
$.each(array, function(i, time){
    // cria um li com nome do time e outra lista ul para os jogadores
    var idTime = 'time' + (i + 1)
    $('#lista-times').append('<li>Time '+ (i + 1) + '</li><li><ul id="' + idTime + '">');

    // loop para percorrer os jogadores do time
    $.each(time, function(j, jogador) {
        $('#' + idTime).append('<li>' + jogador + '</li>');
    });

    $('#lista-times').append('</ul></li>');
})

$('body').append('</ul>');

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

YoualsohavetheoptionwithoutjQuery:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

// cria lista externa (que vai ter todos os times)
let ulExt = document.createElement('ul');
ulExt.style.listStyle = 'none';

// para cada time
array.forEach(function(time, i) {
    // cria li com nome do time
    let liTime = document.createElement('li');
    liTime.appendChild(document.createTextNode('Time '+ (i + 1)));
    ulExt.appendChild(liTime);

    // cria outra lista ul para os jogadores
    let ul = document.createElement('ul');
    time.forEach( function (jogador, j) {
        let li = document.createElement('li');
        li.appendChild(document.createTextNode(jogador));
        ul.appendChild(li);
    });
    let liJog = document.createElement('li');
    liJog.appendChild(ul);
    ulExt.appendChild(liJog);
});
document.body.appendChild(ulExt);

27.09.2018 / 02:59

score 4 · Accepted Answer

You would have to do 2 loops $.each , one to create ul and another to li , and do not need to increment i with i++ , just i+1 , already saves 1 line code:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
  $('body').append('<ul><li>Time '+ (i+1) +'</li><ul></ul></ul>')
  
  var ul = $("ul:last"); // seleciona o último ul inserido
  $.each(a, function(i,a){
     ul.append('<li>'+a+'</li>');
  });
})

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

Rememberingthatthecontentofa<ul>elementrequiresa<li>: <ul>texto</ul>isinvalid.Correct:<ul><li>texto</li></ul>

Now,ifyouwanttoremovethedefaultpropertiesoflistelements,youhavetouseCSS:

var array = [["Jogador1","Jogador2","Jogador3","Jogador4","Jogador5","Jogador6"],["Jogador7","Jogador8","Jogador9","Jogador10","Jogador11","Jogador12"]];

$.each(array, function(i,a){
  $('body').append('<ul class="lista"><li>Time '+ (i+1) +'</li><ul></ul></ul>')
  
  var ul = $("ul:last");
  $.each(a, function(i,a){
     ul.append('<li>'+a+'</li>');
  });
})

.lista, .lista li, .lista ul{
   margin: 0;
   padding: 0;
   list-style: none;
}

.lista{
   margin-top: 15px;
}

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