Ένας οδηγός για την εργασία με JSON στη JavaScript

Εισαγωγή

Υπάρχουν πολλοί τρόποι με τους οποίους το JSON μπορεί να χρησιμοποιηθεί στη JavaScript. Μία από τις πιο βασικές χρήσεις του είναι η αποθήκευση δεδομένων. Μπορείτε επίσης να το χρησιμοποιήσετε για τη μεταφορά δεδομένων μεταξύ πελατών, μεταξύ διακομιστών ή από διακομιστή σε πελάτη. Άλλες χρήσιμες εφαρμογές περιλαμβάνουν τη δυνατότητα διαμόρφωσης και επαλήθευσης δεδομένων, καθώς και τη δημιουργία δομών δεδομένων.

Σε αυτόν τον οδηγό, θα εξερευνήσουμε πώς μπορείτε να χρησιμοποιήσετε το JSON στα προγράμματά σας JavaScript. Εάν έχετε προηγούμενη εμπειρία στον προγραμματισμό με JavaScript, αυτό θα σας φανεί απλό.

Τι είναι το JSON;

Το JSON σημαίνει JavaScript Object Notation. Είναι ένας μορφότυπος που σχεδιάστηκε για να επιτρέπει την κοινή χρήση διαφορετικών τύπων δεδομένων. Το JSON χρησιμοποιεί κυρίως τη JavaScript ως την κύρια γλώσσα προγραμματισμού του. Λειτουργεί επίσης και με άλλες γλώσσες όπως η Python, PHP, Ruby, καθώς και η Java. Είναι εύκολο στην ανάγνωση, εξαιρετικά ελαφρύ και δεν απαιτεί πολλή μορφοποίηση. Μπορείτε να εξοικειωθείτε με τη γενική σύνταξη και δομή του μορφότυπου ακολουθώντας τον οδηγό μας: Μια επισκόπηση του μορφότυπου κοινής χρήσης δεδομένων JSON.

Το JSON μπορεί να χρησιμοποιηθεί μόνο του ή να οριστεί σε άλλη μορφή αρχείου. Όταν είναι μόνο του, χρησιμοποιεί την επέκταση .json. Όταν βρίσκεται σε άλλη μορφή, εμφανίζεται είτε ως συμβολοσειρά JSON μέσα σε εισαγωγικά είτε ως αντικείμενο που έχει εκχωρηθεί σε μια μεταβλητή. Για παράδειγμα, το JSON μπορεί να χρησιμοποιηθεί και σε μορφή .html επίσης. Αυτή η μορφή σάς επιτρέπει να εκτελείτε μεταφορά δεδομένων μεταξύ του διακομιστή και του προγράμματος περιήγησης με σχετική ευκολία.

Η μορφή JSON βασίζεται σε κείμενο. Τα δεδομένα κλειδιού-τιμής εμφανίζονται σε άγκιστρα. Δείτε πώς φαίνεται ένα τυπικό αρχείο .json μοιάζει με αυτό:

Εάν έχετε ένα αντικείμενο JSON σε ένα αρχείο .js ή .html, θα εμφανίζεται ως μεταβλητή κάπως έτσι:

Σε ορισμένες περιπτώσεις, μπορεί να τα δείτε όλα σε μία γραμμή. Αυτό συμβαίνει όταν το JSON αποδίδεται ως συμβολοσειρά αντί για αντικείμενο στο αρχείο JavaScript:

Μπορείτε να μετατρέψετε αντικείμενα JSON σε συμβολοσειρές. Αυτό είναι χρήσιμο όταν θέλετε να πραγματοποιήσετε γρήγορη μεταφορά δεδομένων.

JSON εναντίον Αντικειμένου JavaScript

Όπως αναφέραμε προηγουμένως, το JSON λειτουργεί με οποιαδήποτε γλώσσα προγραμματισμού. Ωστόσο, μπορείτε να εργαστείτε με αντικείμενα JavaScript μόνο χρησιμοποιώντας JavaScript. Η σύνταξη στο JSON και στη JavaScript είναι παρόμοια. Η διαφορά είναι ότι τα αντικείμενα JavaScript εμφανίζονται χωρίς εισαγωγικά στα κλειδιά τους. Επιπλέον, τα αντικείμενα JavaScript μπορούν να χρησιμοποιούν συναρτήσεις ως τιμές, πράγμα που σημαίνει ότι είναι λιγότερο περιορισμένα.

Στο ακόλουθο παράδειγμα, δείχνουμε τη μορφή JavaScript ενός χρήστη. Ο χρήστης είναι ο Sammy Shark και είναι συνδεδεμένος αυτήν τη στιγμή:

Όπως μπορείτε να δείτε, δεν υπάρχουν εισαγωγικά γύρω από κλειδιά όπως τα first_name, last_name, online, ή full_name. Επίσης, υπάρχει μια τιμή συνάρτησης στην τελευταία γραμμή. Εάν θέλετε να αποκτήσετε πρόσβαση στα δεδομένα σε μορφή συμβολοσειράς, μπορείτε να καλέσετε το user.first_name χρησιμοποιώντας τη σημειογραφία τελείας. Εάν θέλετε το πλήρες όνομα, θα χρησιμοποιήσετε το user.full_name(), καθώς πρόκειται για συνάρτηση.

Πώς να αποκτήσετε πρόσβαση σε δεδομένα JSON

Όπως αναφέραμε στην προηγούμενη ενότητα, μπορείτε να αποκτήσετε πρόσβαση σε δεδομένα JSON στη JavaScript χρησιμοποιώντας τη σημειογραφία τελείας. Ας πάρουμε το παράδειγμα ενός αντικειμένου JSON με το όνομα sammy:

Η σημειογραφία τελείας για την πρόσβαση στις τιμές θα είναι:

Η μεταβλητή μπαίνει πρώτη. Μετά από αυτήν, τοποθετούμε μια τελεία. Τέλος, αναφέρουμε το κλειδί στο οποίο θέλουμε να αποκτήσουμε πρόσβαση.

Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε μια ειδοποίηση (alert) στη JavaScript που να εμφανίζει την τιμή του first_name κλειδιού. Για να εμφανιστεί σε ένα αναδυόμενο παράθυρο, θα χρησιμοποιήσουμε τη συνάρτηση JavaScript alert() όπως αυτή:

Ένας άλλος τρόπος πρόσβασης στα δεδομένα από το JSON είναι η χρήση της σύνταξης με αγκύλες. Το κλειδί θα πρέπει να τοποθετηθεί μέσα σε διπλά εισαγωγικά εντός των αγκυλών. Ακολουθεί η συνέχεια του προηγούμενου παραδείγματος:

Τι γίνεται αν εργάζεστε με στοιχεία ένθετου πίνακα; Σε αυτήν την περίπτωση, πρέπει να καλέσετε τον αριθμό του στοιχείου στον πίνακα. Δείτε το ακόλουθο παράδειγμα:

Ας υποθέσουμε ότι θέλουμε να αποκτήσουμε πρόσβαση στη συμβολοσειρά facebook. Δείτε πώς θα χρησιμοποιήσουμε τη σημειογραφία τελείας (dot notation) για να αποκτήσουμε πρόσβαση σε αυτό το στοιχείο στον πίνακα χρησιμοποιώντας τον αριθμό του:

Θυμηθείτε να προσθέσετε μια επιπλέον τελεία για κάθε ένθετο στοιχείο.

Συναρτήσεις που χρησιμοποιούνται με το JSON

Στη συνέχεια, θα δούμε μερικές συναρτήσεις που μπορείτε να χρησιμοποιήσετε με το JSON. Η μεταφορά και η αποθήκευση δεδομένων γίνεται αρκετά εύκολη όταν μπορείτε να μετατρέψετε το JSON από αντικείμενο σε συμβολοσειρά ή από συμβολοσειρά σε αντικείμενο. Θα εξερευνήσουμε πώς μπορείτε να μετατρέψετε σε συμβολοσειρά (stringify) και να αναλύσετε (parse) το JSON με δύο διαφορετικούς τρόπους:

• JSON.stringify()

Οι συμβολοσειρές είναι προτιμότερο να χρησιμοποιούνται όταν προσπαθείτε να μεταφέρετε δεδομένα με ελαφρύ τρόπο. Γι' αυτό χρησιμοποιούνται για την αποθήκευση και τη μεταφορά δεδομένων από τον πελάτη (client) στον διακομιστή (server). Δείτε το ακόλουθο παράδειγμα. Ας υποθέσουμε ότι συλλέγετε δεδομένα των ρυθμίσεων του χρήστη σε ένα μηχάνημα. Πρέπει να στείλετε αυτές τις πληροφορίες στον διακομιστή σας. Θα χρησιμοποιούσατε μια συμβολοσειρά για αυτόν τον σκοπό. Στη συνέχεια, μπορείτε να τη μετατρέψετε ξανά χρησιμοποιώντας το JSON.parse() για να τη διαβάσετε και να εργαστείτε με αυτήν.

Η συνάρτηση που θα επισημάνουμε εδώ είναι η JSON.stringify(). Αυτή η συνάρτηση μετατρέπει ένα αντικείμενο JSON σε μια συμβολοσειρά JSON. Σε αυτό το παράδειγμα, θα εκχωρήσουμε το αντικείμενό μας στη μεταβλητή obj. Θα το μετατρέψουμε χρησιμοποιώντας τη συνάρτηση  JSON.stringify(). Για να το κάνουμε αυτό, θα περάσουμε το obj στη συνάρτηση και στη συνέχεια θα εκχωρήσουμε τη συμβολοσειρά στη μεταβλητή s ως εξής:

Η κλήση της μεταβλητής s θα σας δώσει το JSON ως συμβολοσειρά:

• JSON.parse()

Όπως είναι φυσικό, η JSON.parse() επιτελεί την αντίθετη λειτουργία. Αφού ολοκληρώσετε τη μεταφορά των δεδομένων, πρέπει να τα μετατρέψετε ξανά σε αντικείμενο JSON για να μπορέσετε να εργαστείτε με αυτά. Μια επιλογή είναι να χρησιμοποιήσετε τη συνάρτηση eval(). Ωστόσο, αυτή η προσέγγιση δεν είναι πολύ ασφαλής. Γι' αυτό προτιμάμε να χρησιμοποιούμε τη συνάρτηση JSON.parse().

Δείτε ξανά το προηγούμενο παράδειγμα. Θα περάσουμε τη συμβολοσειρά s στη συνάρτηση JSON.parse(). Στη συνέχεια, θα της δώσουμε μια νέα μεταβλητή:

Το νέο μας αντικείμενο είναι τώρα το o. Θα είναι το ίδιο με το obj. Περισσότερες πληροφορίες προκύπτουν όταν εξετάσουμε τη JSON.parse() σε ένα αρχείο HTML όπως αυτό:

Εδώ, μπορείτε πραγματικά να δείτε πώς μετατρέψαμε τη συμβολοσειρά s σε ένα ανακτήσιμο αντικείμενο. Έτσι, JSON.parse() είναι μια ασφαλής επιλογή για τη μετατροπή συμβολοσειρών JSON σε αντικείμενα.

Συμπέρασμα

Όπως είδαμε σε αυτόν τον οδηγό, το JSON έχει πολλές εφαρμογές στη JavaScript. Είναι ιδιαίτερα χρήσιμο καθώς μπορεί να χρησιμοποιηθεί με σχεδόν οποιαδήποτε γλώσσα προγραμματισμού, καθιστώντας το τη φυσική επιλογή. Επιπλέον, μόλις ξύσαμε την επιφάνεια. Υπάρχουν τόσα πολλά περισσότερα που μπορείτε να κάνετε με το JSON. Υποστηρίζεται ήδη σε API.

Ακολουθούν επιπλέον πόροι από το blog μας που θα σας βοηθήσουν να προγραμματίσετε με τη JavaScript:

• Μάθετε πώς λειτουργούν τα πρωτότυπα και η κληρονομικότητα στη JavaScript.
• Εξερευνήστε λεπτομερώς πώς να προσθέσετε JavaScript στο HTML.
• Αν δημιουργείτε τη δική σας διαδικτυακή εφαρμογή, ρίξτε μια ματιά στον οδηγό μας για το πώς να επιλέξετε την καλύτερη εγκατάσταση διακομιστή.

Καλό προγραμματισμό!