Tutorial JSON - Μάθετε πώς να χρησιμοποιείτε το JSON με JavaScript

Σε αυτό το σεμινάριο, θα μάθουμε για το JSON. Θα καλύψουμε τη δομή JSON, τους διαφορετικούς τύπους δεδομένων και τον τρόπο χρήσης του JSON μέσα σε JavaScript.

Το JSON είναι μια από τις πιο σημαντικές έννοιες που μπορείτε να μάθετε ως προγραμματιστής ή ως QA.

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




Τι είναι το JSON

Το 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

Χρησιμοποιούμε το JSON επειδή είναι εξαιρετικά ελαφρύ να στέλνουμε μπρος-πίσω σε αιτήματα και απαντήσεις http λόγω του μικρού μεγέθους του αρχείου.

Είναι εύκολο να το διαβάσετε σε σύγκριση με κάτι σαν το XML, καθώς είναι πολύ πιο καθαρό και δεν υπάρχουν τόσες πολλές ετικέτες ανοίγματος και κλεισίματος που πρέπει να ανησυχείτε.

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


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

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



Τύποι δεδομένων JSON

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

Όπως γνωρίζουμε, το JSON είναι μια μορφή αναπαράστασης δεδομένων, οπότε πρέπει να είμαστε σε θέση να αντιπροσωπεύουμε συγκεκριμένους τύπους δεδομένων σε αυτό.


Το JSON υποστηρίζει εγγενώς:

  • χορδές
  • αριθμοί Οι αριθμοί μπορούν να είναι σε οποιαδήποτε μορφή, είτε είναι δεκαδικοί αριθμοί ακέραιοι αριθμοί, ακόμη και αριθμοί επιστημονικής συμβολής
  • booleans που μπορεί να είναι είτε αληθές είτε ψευδές
  • μηδενικό που ουσιαστικά δεν σημαίνει τίποτα
  • Πίνακες που μπορεί να είναι μια λίστα με οποιονδήποτε από τους παραπάνω τύπους
  • Αντικείμενα ένα αντικείμενο είναι ο πιο σύνθετος αλλά πιο χρησιμοποιημένος τύπος στο json καθώς σας επιτρέπει να αναπαριστάτε δεδομένα που είναι ζεύγη τιμών κλειδιών


Παράδειγμα JSON

Ας δούμε ένα παράδειγμα για το πώς να χρησιμοποιήσετε το json μέσα σε ένα αρχείο.

Το πρώτο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε ένα αρχείο με το .json επέκταση στο τέλος του.

Θα δημιουργήσουμε ένα user.json αρχείο με αντικείμενο χρήστη που εκπροσωπείται ως 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
  • Το isProgrammer είναι boolean
  • τα χόμπι είναι ένα Array
  • οι φίλοι είναι ένα Array of Objects
Σημείωση:Δεν υπάρχει κόμμα στο τέλος της τελευταίας ιδιότητας στο αρχείο JSON ή σε αντικείμενο JSON.

Πώς να χρησιμοποιήσετε το JSON String Inside JavaScript

Ας υποθέσουμε ότι έχουμε ένα αρχείο 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, η έξοδος είναι παρόμοια με αυτήν που φαίνεται παρακάτω:

Παράδειγμα javascript JSON

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

console.log(JSON.parse(
companies[0].name )) Output: Big corporate

Ομοίως, για να λάβουμε την βαθμολογία της δεύτερης εταιρείας θα χρησιμοποιούσαμε:

console.log(JSON.parse(
companies[1].rating )) Output: 4.3

Πώς να μετατρέψετε το αντικείμενο JavaScript σε JSON

Ας υποθέσουμε ότι έχουμε ένα αντικείμενο 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

Για να μετατρέψουμε το παραπάνω αντικείμενο 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 σημαίνει σημείωση αντικειμένων JavaScript
  • Ελαφριά μορφή ανταλλαγής δεδομένων
  • Με βάση ένα υποσύνολο JavaScript
  • Εύκολη ανάγνωση και εγγραφή
  • Ανεξάρτητη γλώσσα
  • Μπορεί να αναλυθεί στις περισσότερες σύγχρονες γλώσσες προγραμματισμού

Τύποι δεδομένων:

  • Αριθμός: Καμία διαφορά μεταξύ ακέραιου και float
  • Σειρά: Συμβολοσειρά χαρακτήρων Unicode. Χρησιμοποιήστε διπλά εισαγωγικά
  • Boolean: Σωστό ή λάθος
  • Πίνακας: Ταξινομημένη λίστα με 0 ή περισσότερες τιμές σε []
  • Αντικείμενο: Απεριόριστη συλλογή ζευγών κλειδιών / τιμών
  • Μηδενικό: Κενή τιμή

Κανόνες σύνταξης JSON:

  • Χρησιμοποιεί ζεύγη κλειδιών / τιμών - π.χ. {'name': 'value'}
  • Χρησιμοποιεί διπλά εισαγωγικά ΚΛΕΙΔΙ
  • Πρέπει να χρησιμοποιήσετε τους καθορισμένους τύπους δεδομένων
  • Ο τύπος αρχείου είναι .json
  • Ο τύπος MIME είναι 'Application / json'

Ελπίζω να βρείτε αυτό το σεμινάριο JSON με Javascript χρήσιμο. Τώρα μπορείτε να γράψετε απλά και πολύπλοκα αρχεία JSON και να αλληλεπιδράσετε με συμβολοσειρές JSON μέσα σε JavaScript.