Βοήθεια με λιστες σε html

[Hamurabi]

Καλησπερα παιδια. Φτιαχνω ενα web app με python flask. 

Στο flask. Py εχω δυο λιστες. 

Η μια εχει ονοματα φακελων(directories) και η αλλη ονοματα φωτογραφιων που εχει μέσα ο κάθε φακελος. Οι φωτογραφιες ανανεώνονται δυναμικά με το app μου οποτε δεν ειναι  στάνταρ αρχεια. 

Θελω στο index.html  να φαίνεται λοιπόν το εξης:

Φάκελος 1

Φωτο1

Φωτο2

..... 

ΦωτοΧ

Φάκελος 2 

Φωτο 1

Φωτο2

Φακελος3

...... 

Εχω λοιπόν τη λιστα subdirectories που κρατάει τα ονόματα φακελων και τη λιστα files που κρατάει τις φωτος. Στην python φτιαχνω nested loop και μπορω να τα εμφσνισω οπως σας δειχνω. Σε html δεν εχω ιδεα όμως. Εψαξα παρα πολλες ωρες και δεν το βρισκω με τιποτα. Φαντάζομαι για κάποιον web developer θαναι υπόθεση δευτερολεπτων οποτε.. Ναμαι! 

Θα ηθελα μια βοήθεια. 

Σας ευχαριστώ. 

[Hamurabi]

Κανεις;;;; 

[Kercyn]

Θα μπορούσες να κάνεις ένα ajax από τη σελίδα στο backend σου για να πάρεις τα paths των φωτογραφιών και να τα δείξεις.

[Hamurabi]

Επειδη ειναι εκτός της δουλειας μου το web development δεν εχω ιδεα απο html ajax κτλ. 

Οπως ειπα εχω έτοιμο το python flask app, εχω render template το index. Html

Και το μονο που αναζητω ειναι να δειξω τις 2 λιστες που αναφέρω επάνω  σε ενα απλο index. Html αρχείο, δε θέλω τιποτα αλλο. 

Αν μπορεις να γινεις πιο συγκεκριμένος λοιπον θα σου ημουν υπόχρεος. 

3 γραμμες ειναι για καποιον που ξέρει υποθετω

[Kercyn]

Διακρίνω μια σιγουριά για το χρόνο υλοποίησης και το μέγεθος του κώδικα η οποία δεν ξέρω από πού πηγάζει. Αυτό που θα πρέπει να κάνεις είναι να καλείς από την HTML σελίδα σου (με javascript, χρησιμοποιώντας μια τεχνική που λέγεται AJAX) το κατάλληλο endpoint του flask που θα σου επιστρέφει τα paths των φωτογραφιών, ούτως ώστε να μπορείς δυναμικά να αλλάζεις τη σελίδα με javascript. Θα μπορούσες να χρησιμοποιήσεις jquery, η οποία όμως γενικά θεωρείται obsolete, οπότε δεν ξέρω αν θες να τη χρησιμοποιήσεις. Πρέπει να δεις το scope του project σου και πόσο μπορείς να το υποστηρίξεις εσύ. Ενδεχομένως με vanilla JS να είναι καλύτερα, αλλά δεν ξέρω ποιο είναι το trend του frontend για αυτήν την εβδομάδα για να σου δώσω καλύτερες προτάσεις. 

[Hamurabi]

Στην python ας πούμε για να κανω αυτο που θελω ειναι 3 γραμμες. Τις εγραψα σε 20 δευτερόλεπτα. 

Σε html ειναι τοσο δυσκολο δηλαδη;  δε ξερω ρωταω. 

Επειδη δεν ειναι κατι που θα ξαναχρησιμοποιησω γενικα, αν μπορει καποιος να με βοηθήσει ωστε να μη κατσω τωρα να μάθω χίλια νεα πραγματα (html Javascript, jquery, vanilla js κλπ)  για κατι τοσο απλο που θελω. 

Θελω απλα να εμφανισω τη λιστα μου. Δε θελω να κανει κατι. Τις εχω έτοιμες τις λιστες. Απλα να τις δείξει θελω. Ποσο πολύπλοκο μπορεί να είναι αυτο; 

[tsofras]

18 λεπτά πριν, Hamurabi είπε

Στην python ας πούμε για να κανω αυτο που θελω ειναι 3 γραμμες. Τις εγραψα σε 20 δευτερόλεπτα. 

Σε html ειναι τοσο δυσκολο δηλαδη;  δε ξερω ρωταω. 

Επειδη δεν ειναι κατι που θα ξαναχρησιμοποιησω γενικα, αν μπορει καποιος να με βοηθήσει ωστε να μη κατσω τωρα να μάθω χίλια νεα πραγματα (html Javascript, jquery, vanilla js κλπ)  για κατι τοσο απλο που θελω. 

Θελω απλα να εμφανισω τη λιστα μου. Δε θελω να κανει κατι. Τις εχω έτοιμες τις λιστες. Απλα να τις δείξει θελω. Ποσο πολύπλοκο μπορεί να είναι αυτο; 

Η λίστα με τις φωτογραφίες γνωρίζει σε ποιον φάκελο ανήκει?

Βάλε αν θες τον κώδικα για να είναι ευκολότερο να σε βοηθήσει κάποιος

[Hamurabi]

For i in range (0, len(subfolders)) :

directories=os. Listdir('C:/..... /photos') 

  Print (subfolders[i]) 

Path='C:/.... /photos/' + subfolders[i] 

for root_dir, cur_dir, files in os.walk(path):

  print (files) 

Αυτος ο κωδικος στην python κανει ακριβώς αυτο που ζητάω. Εμφανίζει τις λίστες όπως θελω. 

[tsofras]

8 λεπτά πριν, Hamurabi είπε

For i in range (0, len(subfolders)) :

directories=os. Listdir('C:/..... /photos') 

  Print (subfolders[i]) 

Path='C:/.... /photos/' + subfolders[i] 

for root_dir, cur_dir, files in os.walk(path):

  print (files) 

Την html την φτιάχνεις μέσα απο python?

Γιατί δεν χρησιμοποιείς κάποιο έτοιμο file explorer με javascript ? π.χ. https://github.com/cubiclesoft/js-fileexplorer

Εφόσον φαντάζομαι δεν το κάνεις για να μάθεις

[Hamurabi]

Οχι, το index. Html το γραφω σε notepad. 

Δε θελω τιποτα φοβερό κ τρομερο, μονο αυτο να φαίνεται η λιστα. 

Ενδιαφερον και η ιδέα με τον file explorer αλλα εξακολουθώ κ αναρωτιέμαι γιατί ακούγεται τοσο πολυπλοκο ή δυσκολο στην html απλα να μου εμφανιζει τις 2 λιστες που εχω ηδη έτοιμες. 

[DrKo]

2 λεπτά πριν, Hamurabi είπε

Οχι, το index. Html το γραφω σε notepad. 

Δε θελω τιποτα φοβερό κ τρομερο, μονο αυτο να φαίνεται η λιστα. 

Ενδιαφερον και η ιδέα με τον file explorer αλλα εξακολουθώ κ αναρωτιέμαι γιατί ακούγεται τοσο πολυπλοκο ή δυσκολο στην html απλα να μου εμφανιζει τις 2 λιστες που εχω ηδη έτοιμες. 

Αυτό κάνει;

https://www.w3schools.com/html/html_lists_unordered.asp

[Hamurabi]

1 ώρα πριν, DrKo είπε

Αυτό κάνει;

https://www.w3schools.com/html/html_lists_unordered.asp

Οχι αυτο εμφανίζει απλως μια λίστα. 

Εγω θελω και να εμφανιστει κ η Δευτέρη λιστα μεσα στην πρωτη. 

Κανω copy paste απο επανω:

Η μια εχει ονοματα φακελων(directories) και η αλλη ονοματα φωτογραφιων που εχει μέσα ο κάθε φακελος. Οι φωτογραφιες ανανεώνονται δυναμικά με το app μου οποτε δεν ειναι  στάνταρ αρχεια. 

Η λιστα subdirectories εχει τα ονοματα φακελων. 

Η λιστα files εχει τα ονοματα των φωτογραφιων. 

Θελω στο index.html  να φαίνεται λοιπόν το εξης:

Φάκελος 1 

Φωτο1

Φωτο2

..... 

ΦωτοΧ

Φάκελος 2 

Φωτο 1

Φωτο2

Φακελος3

Επεξ/σία 9 Ιουλίου 2022 από Hamurabi

[DrKo]

23 λεπτά πριν, Hamurabi είπε

Οχι αυτο εμφανίζει απλως μια λίστα. 

Εγω θελω και να εμφανιστει κ η Δευτέρη λιστα μεσα στην πρωτη. 

Στο link που παρέθεσα, με λίγο scroll βλέπεις το: 

Nested HTML Lists

Lists can be nested (list inside list)

 

Αυτό δεν κάνει;

[node7]

Πέρνα σαν παραμέτρους στη render_template τις δύο λίστες που έχεις. Πχ.

return render_template('index.html', subfolders=subfolders, files=files)

Στο index.html, αν χρησιμοποιείς jinja, γράψε κάτι σαν:
 

{% for folder in subfolders %}

<h3>{{ folder.name }}</h3>

  <ul>

  {% for file in files %}

    <li>{{file.name}}</li>

  {% endfor %}

  </ul>

{% endfor %}

Βέβαια αυτό που σου γράφω δεν είναι εντελώς σωστό γιατί θα εμφανίζει όλα τα αρχεία κάθε φορά αλλά είναι μια αρχή.

Επεξ/σία 9 Ιουλίου 2022 από node7

[Hamurabi]

Μπραβο, θελω μια εξελιξη αυτου. Ωστε να τα εμφανίζει οπως γραφω απο πανω. 

Οποιος μπορει νακανει συτη τη πολυ μικρη μετατροπη στον απο πανω κωδικο, θα αγγιξουμε τελειοτητα. 

Ευχαριστώ