Βοήθεια σε html-js-php

[Lanike71]

Όποιος φίλος θέλει ας βοηθήσει:

Θέλω να φτιάξω ένα html (ή άλλο τύπο, δεν έχει σημασία) που:

-Διαβάζει από .csv τοπικό και κάνει populate σε array τα δεδομένα.

-Με dropdownlist θα μπορεί κάποιος χρήστης να επιλέγει από μία στήλη αυτά που θέλει να δει, τα οποία θα εμφανίζονται σε html table.

Αν και έχω χρόνια να πιάσω js, δε νομίζω να είναι δύσκολο, θα το βρω.

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

Και ως γνωστό μόνο php έχει τέτοια δυνατότητα.

Και λινκ είναι μια χαρά, γιατί ως τώρα δεν έβγαλα άκρη.

 

[Kercyn]

Κάτι τέτοιο;

[k33theod]

@Lanike71

Αν θες εξήγησε πάλι τι θες να κάνεις. Εγώ δεν κατάλαβα τίποτα.

Όταν λες τοπικό τι εννοείς στο server.

 

4 ώρες πριν, Lanike71 είπε

Και ως γνωστό μόνο php έχει τέτοια δυνατότητα.

 

Αυτό είναι λάθος.

[Lanike71]

Το δεύτερο μισό της δουλειάς, είναι αυτό:

https://stackoverflow.com/questions/55520415/how-to-filter-data-of-a-html-table-with-a-drop-down-menu-with-javascript

Τρέξτε και το code snippet αν θέλετε.

Το πρώτο μισό είναι το βάσανο, καθώς ο πίνακας (όπως και το dropdown)  θα πρέπει να περιέχει δεδομένα που θα διαβαστούν από κάποιο .csv, από το server λογικά.

Το populate του πίνακα, θα γίνεται με τη φόρτωση της σελίδας και όχι με επιλογή από το χρήστη.

Επεξ/σία 10 Δεκεμβρίου 2020 από Lanike71

[Kercyn]

Το CSV αυτό θα είναι στο pc του χρήστη ή σε κάποιον server; Αν είναι τοπικά στο χρήστη, μπορείς απλώς να δώσεις hardcoded το path, να ανοίγεις το αρχείο, να το διαβάζεις και να κάνεις populate ο,τι θες μόλις φορτώσει η σελίδα. Αν είναι στο server, μπορείς πάλι όταν φορτώνει η σελίδα να κάνεις ένα ajax, να πάρεις τα περιεχόμενα και να κάνεις populate ο,τι θες. Κάτι τέτοιο θες ή δεν καταλαβαίνω κάτι;

[Lanike71]

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

Το CSV αυτό θα είναι στο pc του χρήστη ή σε κάποιον server; Αν είναι τοπικά στο χρήστη, μπορείς απλώς να δώσεις hardcoded το path, να ανοίγεις το αρχείο, να το διαβάζεις και να κάνεις populate ο,τι θες μόλις φορτώσει η σελίδα. Αν είναι στο server, μπορείς πάλι όταν φορτώνει η σελίδα να κάνεις ένα ajax, να πάρεις τα περιεχόμενα και να κάνεις populate ο,τι θες. Κάτι τέτοιο θες ή δεν καταλαβαίνω κάτι;

Το δεύτερο. Θα είναι στο σέρβερ.

[Kercyn]

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

Το δεύτερο. Θα είναι στο σέρβερ.

Ωραία, άρα μπορείς στο $( document ).ready() να κάνεις ένα ajax στο server σου, να πάρεις τα περιεχόμενα που θες και μετά να τα κάνεις ό,τι θες στη σελίδα σου. Δεν είναι υποχρεωτικό να χρησιμοποιήσεις jQuery, γίνεται και με vanilla JS, αλλά κάτι τέτοιο θα ήταν αιρετικό.

[papmel]

Στις 10/12/2020 στις 4:28 ΠΜ, Lanike71 είπε

Όποιος φίλος θέλει ας βοηθήσει:

Θέλω να φτιάξω ένα html (ή άλλο τύπο, δεν έχει σημασία) που:

-Διαβάζει από .csv τοπικό και κάνει populate σε array τα δεδομένα.

-Με dropdownlist θα μπορεί κάποιος χρήστης να επιλέγει από μία στήλη αυτά που θέλει να δει, τα οποία θα εμφανίζονται σε html table.

Αν και έχω χρόνια να πιάσω js, δε νομίζω να είναι δύσκολο, θα το βρω.

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

Και ως γνωστό μόνο php έχει τέτοια δυνατότητα.

Και λινκ είναι μια χαρά, γιατί ως τώρα δεν έβγαλα άκρη.

 

Ας πουμε οτι το csv εναι της μορφης

1;code1 ; 100;200;
2;code2 ; 100;300;
3;code3 ; 200;200;
4;code1 ; 150;220;
5;code1 ; 10;120;

θες λοιπον να εχεις 3 Dropdown μενου και οταν ας πουμε στο πρωτο επιλεγει code1 να του φιλτραρει ολες τις εγραφες που εχουν code1 δηλαδη 3 εγραφες σε εναν πινακα? Και αντιστοιχα αν επιλεγει 100 στο δευτερο μενου να του δειχνει 2 εγραφες την 1 και την 2?

Αυτο ζητας?

 

[Lanike71]

12 λεπτά πριν, papmel είπε

Ας πουμε οτι το csv εναι της μορφης

1;code1 ; 100;200;
2;code2 ; 100;300;
3;code3 ; 200;200;
4;code1 ; 150;220;
5;code1 ; 10;120;

θες λοιπον να εχεις 3 Dropdown μενου και οταν ας πουμε στο πρωτο επιλεγει code1 να του φιλτραρει ολες τις εγραφες που εχουν code1 δηλαδη 3 εγραφες σε εναν πινακα? Και αντιστοιχα αν επιλεγει 100 στο δευτερο μενου να του δειχνει 2 εγραφες την 1 και την 2?

Αυτο ζητας?

 

Και αυτό αλλά με βάση μόνο 1 πεδίο, το code.

Κινήθηκα με βάση αυτά που είπε ο Kercyn, βρήκα αυτό,

https://www.js-tutorials.com/jquery-tutorials/reading-csv-file-using-jquery/

αλλά ακόμα δυσκολεύομαι να διαβάσω το csv που θέλω.

 

[papmel]

10 ώρες πριν, Lanike71 είπε

Και αυτό αλλά με βάση μόνο 1 πεδίο, το code.

Κινήθηκα με βάση αυτά που είπε ο Kercyn, βρήκα αυτό,

https://www.js-tutorials.com/jquery-tutorials/reading-csv-file-using-jquery/

αλλά ακόμα δυσκολεύομαι να διαβάσω το csv που θέλω.

 

Δωσε μου 10 λεπτα αφου θέλεις μονο το ενα πεδιο.και θα σου δωσω κωδικα ετοιμο 

Ετοιμος εισαι εδω.

http://94.130.91.150/csvdemo/

Σου εχω βαλει και μερικα σχολια στο JS 
20 γραμμες κωδικας ειναι και δεν χρειαζεσαι plugins και 3rd part.
Ολη η δουλεια ειναι να διαβασεις το text file ( csv) και να το μετατρεψεις σε ενα JSON.
Απο εκει και υστερα κανεις οτι θες.Και φυσικα την ωρα που το μετατρεπεις βαστας καπου τα πεδια που βρισκεις στο COL1 μονο μια φορα.
μετα με Show/Hide δειχνεις αυτα που θες και φυσικα μπορεις να κανεις και Remove TR η να το παραγεις καθε φορα ή να κανεις Filter το Array και οτι αλλο θες
και το βασικότερο δεν χρειαζεσαι php

 

Επεξ/σία 11 Δεκεμβρίου 2020 από papmel

[Lanike71]

12 ώρες πριν, papmel είπε

Δωσε μου 10 λεπτα αφου θέλεις μονο το ενα πεδιο.και θα σου δωσω κωδικα ετοιμο 

Ετοιμος εισαι εδω.

http://94.130.91.150/csvdemo/

Σου εχω βαλει και μερικα σχολια στο JS 
20 γραμμες κωδικας ειναι και δεν χρειαζεσαι plugins και 3rd part.
Ολη η δουλεια ειναι να διαβασεις το text file ( csv) και να το μετατρεψεις σε ενα JSON.
Απο εκει και υστερα κανεις οτι θες.Και φυσικα την ωρα που το μετατρεπεις βαστας καπου τα πεδια που βρισκεις στο COL1 μονο μια φορα.
μετα με Show/Hide δειχνεις αυτα που θες και φυσικα μπορεις να κανεις και Remove TR η να το παραγεις καθε φορα ή να κανεις Filter το Array και οτι αλλο θες
και το βασικότερο δεν χρειαζεσαι php

 

Κατ΄αρχήν ευχαριστώ που μπήκες σε κόπο.

Πώς μπορώ να το τρέξω τοπικά; Πού πρέπει να είναι το .csv; Γιατί σε εμένα δεν τρέχει και πάλι...

[papmel]

10 ώρες πριν, Lanike71 είπε

Κατ΄αρχήν ευχαριστώ που μπήκες σε κόπο.

Πώς μπορώ να το τρέξω τοπικά; Πού πρέπει να είναι το .csv; Γιατί σε εμένα δεν τρέχει και πάλι...

http://94.130.91.150/csvdemo/book1.html

κανε VIEW source και σωστο με οτι ονομασια θες 

μετα κανε View source Στον κωδικα μου και παρτο ολο και βαλτο στο pc σου.
Ζητα το απο το PC σου μεσα του Webserver σου και θα παιξει.
και μπορεις να αλλαξεις το αρχειο με ενα δικο σου

ή στειλε μου 10 εγραφες demo απο το Csv σου και θα βαλω αυτο στο demo για να το εχεις ολο μαζι.
 

[Lanike71]

22 ώρες πριν, papmel είπε

http://94.130.91.150/csvdemo/book1.html

κανε VIEW source και σωστο με οτι ονομασια θες 

μετα κανε View source Στον κωδικα μου και παρτο ολο και βαλτο στο pc σου.
Ζητα το απο το PC σου μεσα του Webserver σου και θα παιξει.
και μπορεις να αλλαξεις το αρχειο με ενα δικο σου

ή στειλε μου 10 εγραφες demo απο το Csv σου και θα βαλω αυτο στο demo για να το εχεις ολο μαζι.
 

Έκανα κανονικά view source, copy-paste, έφτιαξα νέο αρχείο.

Σήκωσα τεστ σέρβερ με xampp, έφτιαξα νέο φάκελο και έβαλα μέσα το html με τον κώδικά σου και το csv που θέλω.

Αλλά μπα...

Άλλαξα τον κώδικα στο σημείο του ajax

	$.ajax({ 
	  url: "data.csv",
	  method:"GET",
	  dataType: "text",       

αλλά δε βλέπω φως.

Αν κάνω κάτι λάθος, πες μου.

Το path είναι σωστό;

Κάνω μία προσθήκη, με όλο το θάρρος, για να σου πω ότι το παράδειγμα από τη σελίδα

https://www.webslesson.info/2017/04/csv-file-to-html-table-using-ajax-jquery.html

δουλεύει κανονικά σε μένα...Αφαίρεσα βέβαια το κουμπί και την if στη μέθοδο για το πάτημά του και φορτώνει κανονικά.

Οπότε κάτι παίζει με το διάβασμα του csv.

Επειδή δεν την έχω φρέσκια τη js, το πάω γραμμή-γραμμή μήπως και βρω το λάθος.

Επεξ/σία 12 Δεκεμβρίου 2020 από Lanike71

[papmel]

11 ώρες πριν, Lanike71 είπε

Έκανα κανονικά view source, copy-paste, έφτιαξα νέο αρχείο.

Σήκωσα τεστ σέρβερ με xampp, έφτιαξα νέο φάκελο και έβαλα μέσα το html με τον κώδικά σου και το csv που θέλω.

Αλλά μπα...

Άλλαξα τον κώδικα στο σημείο του ajax

	$.ajax({ 
	  url: "data.csv",
	  method:"GET",
	  dataType: "text",       

αλλά δε βλέπω φως.

Αν κάνω κάτι λάθος, πες μου.

Το path είναι σωστό;

Κάνω μία προσθήκη, με όλο το θάρρος, για να σου πω ότι το παράδειγμα από τη σελίδα

https://www.webslesson.info/2017/04/csv-file-to-html-table-using-ajax-jquery.html

δουλεύει κανονικά σε μένα...Αφαίρεσα βέβαια το κουμπί και την if στη μέθοδο για το πάτημά του και φορτώνει κανονικά.

Οπότε κάτι παίζει με το διάβασμα του csv.

Επειδή δεν την έχω φρέσκια τη js, το πάω γραμμή-γραμμή μήπως και βρω το λάθος.

Ακου....
Για να μην δουλεβει ο κωδικας μου ειναι δυο περιπτώσεις.
1) το MIME για το CSV δεν το εχεις περασει στον webserver σου . ( πες μου τι webserver εχεις ) apache,nignx,iis?
2) το CSV σου να εχει μεσα χαρακτηρες οπως ",' στα πεδια που τοτε απλα θελει ειτε να τους αφαιρεσεις ειτε οταν διαβαζεις το αρχειο να τους καθαριζεις ειτε να τους κανεις encoding.
ο κωδικας δουλεβει μια χαρα και οτι χρειαζεσαι ειναι εκει.
Στο παραδειγμα που μου εδωσες το διαχωριστικο ειναι κομμα ενο στο δικο μου ειναι ερωτηματικο.
Σου ειπα να μου δωσεις ενα Sample απο το CSV σου δεν το εκανες.Μπορουσε να στειλες 2-3 γραμμες να στο ανεβασω.
Αφου εχεις την λυση καντο απο εκει.Εμενα μου φανηκε πολυ χρησιμο και το εφτιαξα να το εχω.
 

 

[Lanike71]

13 λεπτά πριν, papmel είπε

Ακου....
Για να μην δουλεβει ο κωδικας μου ειναι δυο περιπτώσεις.
1) το MIME για το CSV δεν το εχεις περασει στον webserver σου . ( πες μου τι webserver εχεις ) apache,nignx,iis?
2) το CSV σου να εχει μεσα χαρακτηρες οπως ",' στα πεδια που τοτε απλα θελει ειτε να τους αφαιρεσεις ειτε οταν διαβαζεις το αρχειο να τους καθαριζεις ειτε να τους κανεις encoding.
ο κωδικας δουλεβει μια χαρα και οτι χρειαζεσαι ειναι εκει.
Στο παραδειγμα που μου εδωσες το διαχωριστικο ειναι κομμα ενο στο δικο μου ειναι ερωτηματικο.
Σου ειπα να μου δωσεις ενα Sample απο το CSV σου δεν το εκανες.Μπορουσε να στειλες 2-3 γραμμες να στο ανεβασω.
Αφου εχεις την λυση καντο απο εκει.Εμενα μου φανηκε πολυ χρησιμο και το εφτιαξα να το εχω.
 

 

Αυτό που παρέθεσα δεν είναι λύση γιατί δεν έχει κάποιο φίλτρο να φιλτράρει. Απλά φορτώνει το csv και φορτώνει όποιο και αν δοκίμασα (από τα δικά μου).

Δοκίμασα και το ερωτηματικό να το κάνω κόμμα πριν απαντήσω, αλλά και πάλι δε δούλεψε.

Το μόνο που μπορώ να δω ως διαφορά είναι το

data.split(/\r?\n|\r/)

Ευχαριστώ πολύ για το χρόνο σου, θα το ξαναδώ. Ο σέρβερ είναι apache.

Επεξ/σία 13 Δεκεμβρίου 2020 από Lanike71