web-dev-qa-db-fra.com

Créez li de boucle en matrice et affichez-le au format HTML

J'apprends le javaScript et je veux boucler un tableau et l'afficher au format HTML sous forme de liste. Comment puis je faire ça?

Tableau: var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

javascript:

function listItem(item){
  for (var i = 0; i < item.array.length; i++){
    var list = item.array[i];
    
    list = document.createElement('li');
    document.getElementByClass('box').appendChild(list);
    
    console.log(list);
  }  
 }
<div class ="box"><ul></ul></div>

javascriptarraysloopsdom
3
user4219935

Toutes les réponses fournies fonctionnent et vont bien - elles souffrent toutes du même problème - en ce sens qu'elles ajoutent l'élément au DOM à chaque itération. Avec une petite liste, cela ne posera pas de problème, mais si vous traitez avec un grand nombre d’éléments que vous souhaitez inclure dans votre liste, la manipulation constante de son DOM aura un coût en termes de performances. 

Il est de loin préférable (IMO) de créer une seule chaîne de li, puis lorsque le tableau est entièrement itéré - passez la chaîne à l'UL à l'aide de .innerHTML - dans le DOM en une seule action. Même résultat - mais plus rapide.

var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;
<div id="slideContainer"></div>

4
gavgrif

Assez simple:

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]

array.forEach(function(item) {
  var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
});
<ul id="myUl"></ul>

Ce code a les effets suivants:

  • Pour chaque élément du tableau:
    1. Créer un nouveau <li>
    2. Créer un noeud de texte avec le texte du tableau
    3. Ajouter le texte au <li>
    4. Ajouter le <li> au <ul>

Tout cela devient beaucoup plus simple si vous utilisez jQuery:

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
array.forEach(function(item) {
  $("#myUL").append("<li>" + item + "</li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>

EDIT: Si vous voulez utiliser une boucle for normale au lieu de forEach, vous pouvez le faire comme suit:

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
for (i = 0; i < array.length; i++) {
  var li = document.createElement("li");
  var text = document.createTextNode(array[i]);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
}
<ul id="myUl"></ul>

La seule différence dans ce code est qu'au lieu d'utiliser la méthode forEach intégrée pour parcourir en boucle le tableau et effectuer des opérations sur chaque élément, nous parcourons manuellement les index du tableau.

2
stybl

Vous pouvez utiliser la méthode ES6 réduire et les littéraux de modèle. Vous pourriez les utiliser comme ceci:

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'],
  // Reduce will iterate over all the array items and returns a single value.
  listItems = array.reduce((result, item) => {
    // Add a string to the result for the current item. This syntax is using template literals.
    result += `<li>${item}</li>`;
    
    // Always return the result in the reduce callback, it will be the value or result in the next iteration.
    return result;
  }, ''); // The '' is an empty string, it is the initial value result.
  // Get the element from the DOM in which to display the list, this should be an ul or ol element.
  resultElement = document.getElementById('result');

// Set the inner HTML
resultElement.innerHTML = listItems;
<ul id="result"></ul>

Pour plus d'informations sur réduire, voir ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce . Et si vous voulez en savoir plus sur les modèles de littéraux, cliquez ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

2
Thijs

Convertissez le tableau en chaîne en utilisant Array # join et en utilisant des balises d’éléments de liste comme séparateurs. Ajoutez les balises de début et de fin manuellement à l'aide de la concaténation de chaînes (+). Assignez la chaîne à l'élément de liste (ul#target) à l'aide de Element # innerHTML :

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

target.innerHTML = '<li>' + array.join('</li><li>') + '</li>';
<ul id="target"></ul>

1
Ori Drori

Essayez ceci, vous pouvez aussi ajouter à la liste

var arr = [
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2)
];

console.log(arr);
var ul = document.createElement('ul');
ul.className = 'myUL';
document.getElementById('container').appendChild(ul);

function myFunction() {
     
    // for(var i =0;i<5;i++){
    //   arr.Push(Math.random().toFixed(2));
    // }
  create(arr);
}

function create(arr){
  arr.forEach(function(data){
  var li = document.createElement('li');
  ul.appendChild(li);
  li.innerHTML  += data;
  li.className = "myList";
});
}create(arr);
#container .myUL{
  padding:0px;
}

#container .myUL .myList {
  list-style-type: none;
  border:1px solid grey;
  padding:5%;
  border-radius:5px;
  margin:4px;
}
.click{
  width:80px;
  height:30px;
  border-radius:5px;
  color:#fff;
  background:#323232;
  font-size:15px;
    
}
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- create a ul li using js  -->

  <button class="click" onclick="myFunction()">Click Me</button>
<div id="container"></div>
</body>
</html>

0
sg28