38.3 foreach

Pubblicato il di

Spighiamo il foreach con un esempio pratico, dato il seguente file HTML

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>foreach</title>
    <script src="foreach.js"></script>
</head>
<body>
    <h1>foreach Cities</h1>
    <div id="city"></div>
    <script src="foreach.js"></script>
</body>
</html>

abbiamo inserito un  <div> con id city inseriamo nel file foreach.js un array cities contenente oggetti con città e regioni

let cities = [
    { name: 'TORINO' , reg: 'PIE' } ,
    { name: 'ASTI' , reg: 'PIE' } ,
    { name: 'MILANO' , reg: 'LOM' } ,
    { name: 'COMO' , reg: 'LOM' } 
];

l’obbiettivo è quello di ciclare l’array city e inserire i dati nel <div> id=city, quindi memorizziamo il riferimento ad esso con getElementById

let city = document.getElementById('city');

 inoltre creo un elemento <ul> con createElement

let ul = document.createElement('ul');

ora utilizzo il forEach sull’array cities che riceve gli stessi parametri della funzione filter, anche in questo ci interessa solo il primo parametro ele, per inserire le città dentro a degli <li>

cities.forEach( function (ele) {
    let li = document.createElement('li');
});

La funzione forEach esegue la funzione che passiamo come parametro per tutti gli elementi dell’array che siano dettati, cioè diversi da UNDEFINED oppure oggetti con chiavi eliminate.

Adesso dentro ogni <li> inserisco il nome delle città che vengono passate dal parametro ele, con innerHTML

li.innerHTML = ele.name;

Infine inserisco (appiccico) ogni <li> creato alla lista <ul> con appendChild

ul.appendChild(li);

Ora che col foreach ho creato tutta la mia lista posso inserirla nel <div> city

city.appendChild(ul);

Ho costruito e inserito nella pagina web la lista delle città recuperate da un array, ecco il codice completo:

let cities = [
    { name: 'TORINO' , reg: 'PIE' } ,
    { name: 'ASTI' , reg: 'PIE' } ,
    { name: 'MILANO' , reg: 'LOM' } ,
    { name: 'COMO' , reg: 'LOM' }
];

let city = document.getElementById('city');
let ul = document.createElement('ul');

cities.forEach( function (ele) {
    let li = document.createElement('li');
    li.innerHTML = ele.name;
    ul.appendChild(li);
});

city.appendChild(ul);

Se per esempio volessi ciclare solo le variabili del Piemonte, aggiungo una variabile pieCities che conterrà i dati estratti dall’array con la funzione filter .

let pieCities = cities.filter( v => v.reg == 'PIE');

Si noti l’uso della funzione freccia usata come parametro di filter e l’uso del doppio uguale ( == ).

A questo punto sarà sufficiente ciclare col forEach la variabile pieCities

let ul = document.createElement('ul');
let pieCities = cities.filter( v => v.reg == 'PIE');

pieCities.forEach( function (ele) {
    let li = document.createElement('li');
    li.innerHTML = ele.name;
    ul.appendChild(li);
});

city.appendChild(ul);

allo stesso modo posso fare con le città della Lombardia 

let pieCities = cities.filter( v => v.reg == 'LOM');