Σε αυτό το σεμινάριο, θα μάθουμε για το JSON. Θα καλύψουμε τη δομή JSON, τους διαφορετικούς τύπους δεδομένων και τον τρόπο χρήσης του JSON μέσα σε JavaScript.
Το JSON είναι μια από τις πιο σημαντικές έννοιες που μπορείτε να μάθετε ως προγραμματιστής ή ως QA.
Καθ 'όλη τη διάρκεια της καριέρας προγραμματισμού σας, θα χρησιμοποιείτε το JSON όλη την ώρα είτε δημιουργείτε ένα API, καταναλώνετε ένα API είτε δημιουργείτε αρχεία ρυθμίσεων για την εφαρμογή σας.
Το JSON που σημαίνει συμβολισμό αντικειμένων JavaScript, είναι απλώς μια μορφή αναπαράστασης δεδομένων πολύ παρόμοια με το XML ή το YAML.
Χρησιμοποιείται ευρέως στο Διαδίκτυο για σχεδόν κάθε API στο οποίο θα έχετε πρόσβαση, καθώς και για αρχεία ρυθμίσεων και πράγματα όπως παιχνίδια και προγράμματα επεξεργασίας κειμένου.
Ένα παράδειγμα JSON:
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
Χρησιμοποιούμε το JSON επειδή είναι εξαιρετικά ελαφρύ να στέλνουμε μπρος-πίσω σε αιτήματα και απαντήσεις http λόγω του μικρού μεγέθους του αρχείου.
Είναι εύκολο να το διαβάσετε σε σύγκριση με κάτι σαν το XML, καθώς είναι πολύ πιο καθαρό και δεν υπάρχουν τόσες πολλές ετικέτες ανοίγματος και κλεισίματος που πρέπει να ανησυχείτε.
Το JSON ενσωματώνεται επίσης πολύ ωραία με το JavaScript αφού το JSON είναι απλώς ένα υποσύνολο της JavaScript, πράγμα που σημαίνει ότι οτιδήποτε γράφετε σε ένα JSON είναι έγκυρο JavaScript.
Σχεδόν κάθε μεγάλη γλώσσα έχει κάποια μορφή βιβλιοθήκης ή ενσωματωμένη λειτουργικότητα για την ανάλυση των συμβολοσειρών JSON σε αντικείμενα ή τάξεις σε αυτήν τη γλώσσα.
Αυτό καθιστά την εργασία με δεδομένα JSON εξαιρετικά εύκολη στο εσωτερικό μιας γλώσσας προγραμματισμού.
Τώρα που καταλαβαίνουμε τι είναι το JSON και γιατί είναι σημαντικό, ας ρίξουμε μια ματιά σε κάποια από τις σχετικές σύνταξη και τους τύπους δεδομένων που μπορεί να αντιπροσωπεύει η JSON.
Όπως γνωρίζουμε, το JSON είναι μια μορφή αναπαράστασης δεδομένων, οπότε πρέπει να είμαστε σε θέση να αντιπροσωπεύουμε συγκεκριμένους τύπους δεδομένων σε αυτό.
Το JSON υποστηρίζει εγγενώς:
Ας δούμε ένα παράδειγμα για το πώς να χρησιμοποιήσετε το json μέσα σε ένα αρχείο.
Το πρώτο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε ένα αρχείο με το .json
επέκταση στο τέλος του.
Θα δημιουργήσουμε ένα user.json
αρχείο με αντικείμενο χρήστη που εκπροσωπείται ως JSON.
Για να δημιουργήσουμε ένα αντικείμενο πρέπει να χρησιμοποιήσουμε το άνοιγμα και το κλείσιμο των σγουρών τιράντες {}
και στη συνέχεια θα βάλουμε όλα τα βασικά ζεύγη τιμών που αποτελούν το αντικείμενο μας.
Κάθε ιδιοκτησία μέσα στο JSON είναι ένα ζεύγος τιμών κλειδιού. Το κλειδί πρέπει να περιβάλλεται από διπλό ''
εισαγωγικά ακολουθούμενα από άνω και κάτω τελεία :
και μετά η τιμή για αυτό το κλειδί.
Εάν έχουμε πολλαπλά ζεύγη τιμών κλειδιών, χρειαζόμαστε κόμματα ,
διαχωρίζοντας κάθε ένα από τα ζεύγη βασικών τιμών μας, παρόμοιο με τον τρόπο δημιουργίας ενός πίνακα σε μια κανονική γλώσσα προγραμματισμού.
#user.json {
'name': 'Steve',
'age': 43,
'isProgrammer' true,
'hobbies': ['Reading Java books', 'cooking', 'classic music'],
'friends': [{
'name': 'joey',
'age': 39,
'isProgrammer': false,
'friends': [...]
}] }
Στο παραπάνω παράδειγμα, έχουμε ένα αρχείο που ονομάζεται user.json
. Μέσα στο αρχείο έχουμε διαφορετικούς τύπους δεδομένων.
Τα κλειδιά περικλείονται πάντα από διπλά εισαγωγικά. Για τις τιμές, μόνο ο τύπος συμβολοσειράς περιβάλλεται από διπλά εισαγωγικά.
Στο παράδειγμα:
string
integer
boolean
Array
Array of Objects
Ας υποθέσουμε ότι έχουμε ένα αρχείο JSON που ονομάζεται companies.json
που είναι μια σειρά αντικειμένων της εταιρείας:
[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
} ]
Στο παραπάνω παράδειγμα, έχουμε δύο εταιρικά αντικείμενα μέσα σε έναν πίνακα JSON.
Τώρα ας δούμε πώς μπορούμε να χρησιμοποιήσουμε το παραπάνω JSON μέσα σε ένα JavaScript.
Στα περισσότερα σενάρια, λαμβάνουμε ένα JSON ως συμβολοσειρά και όχι ένα αντικείμενο JSON. Για να το μιμηθούμε, αντιπροσωπεύουμε το παραπάνω JSON ως συμβολοσειρά μέσα στο JavaScript.
Το αρχείο html μοιάζει με:
JSON Example
let companies =
`[
{
'name': 'Big corporate',
'numberOfEmployees': 1000,
'ceo': 'Neil',
'rating': 3.6
},
{
'name': 'Small startup',
'numberOfEmployees': 10,
'ceo': null,
'rating': 4.3
}
]`
console.log(JSON.parse(companies))
Όταν ελέγχουμε το αρχείο καταγραφής της κονσόλας στα Εργαλεία προγραμματιστών του Chrome, η έξοδος είναι παρόμοια με αυτήν που φαίνεται παρακάτω:
Τότε μπορούμε να αναλύσουμε το παραπάνω JSON καθορίζοντας τι θέλουμε να εξαγάγουμε. Για παράδειγμα, αν θέλαμε να πάρουμε το όνομα της πρώτης εταιρείας στον πίνακα θα χρησιμοποιούσαμε:
console.log(JSON.parse(
companies[0].name )) Output: Big corporate
Ομοίως, για να λάβουμε την βαθμολογία της δεύτερης εταιρείας θα χρησιμοποιούσαμε:
console.log(JSON.parse(
companies[1].rating )) Output: 4.3
Ας υποθέσουμε ότι έχουμε ένα αντικείμενο JavaScript όπως αυτό που φαίνεται παρακάτω:
JSON Example
var person = {
name: 'Brad',
age: 35
}
Για να μετατρέψουμε το αντικείμενο JavaScript ατόμου σε JSON χρησιμοποιούμε stringify
μέθοδος:
jsonPerson = JSON.stringify(person);
Η έξοδος είναι έγκυρη JSON:
{
'name': 'Brad',
'age': 35 }
Σημείωση:console.log(jsonPerson.name)
εκτυπώσεις απροσδιόριστος . Για να λάβουμε την τιμή, πρέπει να μετατρέψουμε το JSON σε αντικείμενο JavaScript.Για να λειτουργήσει το παραπάνω, πρέπει να μετατρέψουμε το JSON σε αντικείμενο JavaScript.
Για να μετατρέψουμε το παραπάνω αντικείμενο JSON σε JavaScript, χρησιμοποιούμε το parse
μέθοδος:
jsPerson = JSON.parse(jsonPerson)
Σημείωση:Τώρα αν δοκιμάσαμε console.log(jsPerson.name)
παίρνουμε τον 'Μπραντ'.
JSON Example
var person = {
name: 'Brad',
age: 35
}
jsonPerson = JSON.stringify(person); //convert to JSON
console.log(jsonPerson.name); //undefined
jsPerson = JSON.parse(jsonPerson); //convert to JS Object
console.log(jsPerson.name); //Brad
Τύποι δεδομένων:
[]
Κανόνες σύνταξης JSON:
{'name': 'value'}
Ελπίζω να βρείτε αυτό το σεμινάριο JSON με Javascript χρήσιμο. Τώρα μπορείτε να γράψετε απλά και πολύπλοκα αρχεία JSON και να αλληλεπιδράσετε με συμβολοσειρές JSON μέσα σε JavaScript.