Esercizi di manipolazione dati in Javascript

CSV

1. Calciatori

Dato un CSV come il seguente:

Nome,Cognome,Ruolo,Età
Luca,Rossi,Portiere,25
Marco,Bianchi,Difensore,28
Giovanni,Esposito,Centrocampista,22
Alessandro,Russo,Attaccante,30
Federico,Romano,Difensore,27
Matteo,Colombo,Centrocampista,24
Simone,Ricci,Attaccante,29
Andrea,Marino,Portiere,26

Scrivere una funzione generatrice che crea un oggetto con i seguenti metodi pubblici:

a) load(csv): funzione che riceve in input la stringa CSV, e salva (in una variabile privata) la lista dei giocatori (va bene sia come lista di dizionari che come lista di liste).

b) role(roleName): funzione che riceve in ingresso un ruolo (es. “centrocampista”) e restituisce l’elenco dei giocatori che ricoprono tale ruolo ordinata per età.

2. Magazzino

Dato un CSV come il seguente:

nome, categoria, prezzo, quantità
pane, alimenti, 2, 108
latte, alimenti, 1, 89
detersivo, casalinghi, 2, 53

a) Leggere la stringa CSV e produrre un oggetto lista che contiene come elementi gli oggetti della lista (sotto forma di dizionari).

b) Scrivere una funzione che riceve in ingresso il dizionario creato e genera un CSV risultato con questa struttura:

nome, categoria, valore

Dove valore indica il valore totale (prezzo * quantità)

Ad esempio:

nome, categoria, valore
pane, alimenti, 216
latte, alimenti, 89
detersivo, casalinghi, 106

c) Scrivere una funzione filtro che riceve in ingresso un un prezzo e restituisce una lista contenente tutti i prodotti di prezzo inferiore o uguale a quello ricevuto in ingresso. 

Es:

filtro(2) -> il risultato sarà una lista degli oggetti che rispondono al requisito.

3. Voti

Sia dato il seguente CSV:

nome, cognome, italiano, storia, matematica, informatica, inglese, tpsi, gpoi
Mario, Rossi, 6, 7, 6, 6, 5, 6, 6
Sandra, Verdi, 5, 5, 7, 7, 10, 8, 7

Scrivere una funzione che riceve in ingresso la stringa contenente il CSV e genera un CSV risultato con questa struttura:

nome, cognome, media, status, Insufficienti

Dove:

media: indica la media dei voti

status: indicare se “promosso” (media >= 6) o “bocciato” (media < 6)

insufficienti: numero di materie insufficienti

Ad esempio:

nome, cognome, media, status, Insufficienti
Mario, Rossi, 6.0, promosso, 1
Sandra, Verdi, 7.0, promosso, 2

4. Appartamenti

Dato un CSV come il seguente:

Tipologia,Metratura,Prezzo,Zona 
Appartamento,85,300000,Centro Storico 
Villa,200,1200000,San Siro 
Monolocale,45,150000,Porta Romana 
Bilocale,65,250000,Navigli 
Attico,120,800000,Brera 
Loft,90,400000,Isola 
Trilocale,100,350000,Bicocca 
Quadrilocale,150,600000,CityLife

Scrivere un componente che con i seguenti metodi pubblici:

1.1  load(csv): funzione che riceve in input la stringa CSV, e salva (in una variabile privata) la lista degli appartamenti (come oggetto Javascript).

1.2 render(parentElement): funzione che genera una tabella coi dati degli appartamenti e la inserisce come html in parentElement. 

1.3 add(data): funzione che riceve in input un dizionario con i dati di un nuovo immobile (tipologia, metratura, prezzo zona) e li aggiunge alla lista. Poi esegue automaticamente una render.

Fetch e promise

1. Meteo GET

Data la seguente request:

Scrivere una funzione che riceve come ingresso il nome di una città e restituisce la promise che contiene la fetch, ma non la esegue.

2. Pannello solare

Un controller IoT di un pannello solare è gestito da una applicazione web che deve inviare periodicamente il suo stato al server, con questa struttura.

3. Streaming

TV Sport è una applicazione web (per smartTV) che mostra contenuti video sportivi in streaming agli utenti. I contenuti vengono inviati in pacchetti (identificati da un ID) contenenti pochi secondi di video e quindi l’applicazione web effettua periodicamente tramite la seguente chiamata.

Dove XXX è il codice del pacchetto video richiesto (si parte da 0). In caso di risposta corretta da parte del server il controller schedula la chiamata successiva dopo 5 secondi (dove il codice viene incrementato di 1). In caso di errore invece schedula la prossima chiamata istantaneamente. Usare setTimeout.

Scrivere il codice che gestisce quanto descritto qui sopra.

4. Meteo POST

Scrivere il codice necessario per eseguire la seguente request e gestisce la risposta “ok” salvandola in console.

5. Promise in sequenza

Una applicazione web Javascript deve eseguire le seguenti chiamate (GET):

5. Promise in parallelo

Una applicazione web Javascript deve eseguire le seguenti chiamate (GET):

Come si può vedere le richieste successive dipendono dai dati ricevuti dalla prima. Scrivere una funzione che crea una promise che effettua tutte le chiamate e che restituisce un dizionario contenenti le chiavi “resultA” e “resultB”.

Componenti

1. Calciatori

Dato un CSV come il seguente:

Nome,Cognome,Ruolo,Età
Luca,Rossi,Portiere,25
Marco,Bianchi,Difensore,28
Giovanni,Esposito,Centrocampista,22
Alessandro,Russo,Attaccante,30
Federico,Romano,Difensore,27
Matteo,Colombo,Centrocampista,24
Simone,Ricci,Attaccante,29
Andrea,Marino,Portiere,26

Scrivere una funzione generatrice che crea un oggetto con i seguenti metodi pubblici:

a) load(csv): funzione che riceve in input la stringa CSV, e salva (in una variabile privata) la lista dei giocatori (va bene sia come lista di dizionari che come lista di liste).

b) role(roleName): funzione che riceve in ingresso un ruolo (es. “centrocampista”) e restituisce l’elenco dei giocatori che ricoprono tale ruolo ordinata per età.

c) render(parentElement): funzione che genera una tabella coi dati dei giocatori e la inserisce come html in parentElement

2. Table builder

Scrivere una funzione generatrice createTable(parentElement) che crea un oggetto “tabella” che gestirà una tabella con dei dati. L’argomento parentElement indica l’oggetto DOM in cui sarà inserita la tabella. Questo oggetto avrà le seguenti proprietà:

Esempio di utilizzo:

const table = createTable(document.querySelector(“body”));
table.build([[ “Cognome”, “Voto”], [“Pogba”, “6”], [“Vlahovic”, 8], [“Thuram”, 6.5]]);
table.render();

3. Form builder

Scrivere una funzione generatrice createForm(parentElement, labels) che crea un oggetto che gestirà una form con dei campi di input text ed un bottone “submit”. L’argomento parentElement indica l’oggetto DOM in cui sarà inserita la form, mentre l’argomento labels è una lista delle label dei campi di input della form. Questo oggetto avrà le seguenti proprietà:

Esempio di utilizzo:

const form = createForm(document.querySelector(“body”), [“nome”, “cognome”, “età”]);
form.onsubmit = (data) => { console.log(data); }
form.render();

4. Motociclette

Dato un JSON come il seguente:

{
    "moto": [
        {"nome": "Ducati Panigale V4", "anno": 2022, "cilindrata": 1103, "potenza": 214},
        {"nome": "Yamaha YZF-R1", "anno": 2021, "cilindrata": 998, "potenza": 200},
        {"nome": "Kawasaki Ninja H2", "anno": 2022, "cilindrata": 998, "potenza": 231},
        {"nome": "Honda CBR1000RR-R", "anno": 2021, "cilindrata": 1000, "potenza": 217},
        {"nome": "BMW S1000RR", "anno": 2022, "cilindrata": 999, "potenza": 207},
        {"nome": "Suzuki GSX-R1000", "anno": 2021, "cilindrata": 999, "potenza": 202},
        {"nome": "Aprilia RSV4", "anno": 2022, "cilindrata": 1099, "potenza": 217},
        {"nome": "MV Agusta F4", "anno": 2019, "cilindrata": 998, "potenza": 205}
    ]
}

Scrivere una funzione generatrice che crea un oggetto con i seguenti metodi pubblici:

a)  load(json): funzione che riceve in input la stringa SON, e salva (in una variabile privata) la lista delle motociclette.

b) filterPerYear(year): funzione che riceve in ingresso un anno (es. “2022”) e restituisce l’elenco delle moticiclette di quell’anno ordinata per potenza.1.3

c) toCSV(): funzione che genera un CSV coi dati delle motociclette.