Προς το περιεχόμενο

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


Hamurabi

Προτεινόμενες αναρτήσεις

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

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

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

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

Φάκελος 1

Φωτο1

Φωτο2

..... 

ΦωτοΧ

Φάκελος

Φωτο 1

Φωτο2

Φακελος3

...... 

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

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

  • Moderators

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

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

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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 κανει ακριβώς αυτο που ζητάω. Εμφανίζει τις λίστες όπως θελω. 

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

Αυτό κάνει;

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημοσ. (επεξεργασμένο)
1 ώρα πριν, DrKo είπε

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

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

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

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

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

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

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

Φάκελος 

Φωτο1

Φωτο2

..... 

ΦωτοΧ

Φάκελος 

Φωτο 1

Φωτο2

Φακελος3

Επεξ/σία από Hamurabi
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

Nested HTML Lists

Lists can be nested (list inside list)

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημοσ. (επεξεργασμένο)

Πέρνα σαν παραμέτρους στη 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 %}

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

Επεξ/σία από node7
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

Ευχαριστώ 

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...