Cauta rapid aici ↑

Cum sa afisezi datele dintr-un array de array-uri in browser

Afisarea datelor dintr-un array de array-uri in browser se poate face foarte usor si fara batai de cap. Trebuie doar sa analizezi un pic array-ul si sa vezi cum poti personaliza CSS-ul dupa acesta. In exemplul de mai jos avem trei variabile. Prima variabila va fi array-ul nostru parinte cu alte array-uri copil ce vor contine datele ce urmeaza a fi afisate, a doua variabila va fi un string ce va contine codul nostru HTML necesar pentru a pune fiecare valoare din array la locul lor (se observa caracterele \n (new line) si \t (tab) pentru a fi frumos aranjate si afisate) iar ultima variabila va fi elementul HTML selectat in care vom pune toate datele.

Mai departe vom avea nevoie de o bucla for pentru a insera codul nostru HTML in acel container, cod ce va contine toate aceste date ale array-urilor. Observati ca bucla for va rula exact cat este lungimea array-ului parinte si din acest motiv nu va trebui sa facem in viitor modificari la aceasta linie de cod. Dupa ce am inserat acest cod HTML, urmatorul pas este sa selectam toate aceste elemente in alte trei variabile cu rol semantic.

Urmatoarele linii de cod sunt reprezentate de o alta bucla for ce in acest caz va declansa rularea unei functii care se va apela singura. Suna ciudat si probabil ca va ganditi ca este o greseala de sintaxa sau altceva, dar este bine sa stiti ca functiile sunt obiecte de prima clasa in JavaScript si acestea pot fi folosite aproape oriunde. Dupa cum se vede, functia care se apeleaza singura va primi ca parametru valoarea pe care o are variabila temporara i. Tot aceasta variabila temporara o vom folosi pentru a selecta un array copil din array-ul parinte iar mai departe, in a doua pereche de paranteze drepte vom pune o cifra reprezentand a cata variabila din acel array copil este valoarea care ne intereseaza.

Sunt convins ca puteti face acest script mai scurt sau mai eficient insa prin acest mic tutorial am vrut sa va arat o idee de plecare si asa cum spuneam mai sus voi va trebui sa ajustati CSS-ul pentru a pastra un rol semantic in pagina. In cazul in care array-urile voastre sunt mai complexe decat banalul array creat de mine atunci va trebui sa ajustati acest script care in prezent are si avantajul ca puteti mari sau micsora array-ul parinte cu alte array-uri copil dupa bunul plac.