JavaScript JSON

Πίνακας περιεχομένων

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

Το JSON χρησιμοποιείται συχνά όταν τα δεδομένα αποστέλλονται από έναν διακομιστή σε έναν ιστό σελίδα.

Τι είναι το JSON;

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

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

Παράδειγμα JSON

Αυτή η σύνταξη JSON ορίζει ένα αντικείμενο υπαλλήλων: έναν πίνακα από 3 εγγραφές υπαλλήλων (αντικείμενα):

Παράδειγμα JSON

{
"employees":[
  {"firstName":"John", "lastName":"Doe"}, 
  {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

Η μορφή JSON αξιολογείται σε αντικείμενα JavaScript

Η μορφή JSON είναι συντακτικά πανομοιότυπη με τον κώδικα δημιουργίας Αντικείμενα JavaScript.

Λόγω αυτής της ομοιότητας, ένα πρόγραμμα JavaScript μπορεί εύκολα να μετατρέψει δεδομένα JSON σε εγγενή Αντικείμενα JavaScript.

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

Τα δεδομένα είναι σε ζεύγη ονόματος/τιμής
Τα δεδομένα διαχωρίζονται με κόμμα
Τα σγουρά σιδεράκια συγκρατούν αντικείμενα
Οι τετράγωνες αγκύλες συγκρατούν πίνακες

Δεδομένα JSON - Ένα όνομα και μια τιμή

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

Ένα ζεύγος ονόματος/τιμής αποτελείται από ένα όνομα πεδίου (σε διπλά εισαγωγικά), ακολουθούμενο από άνω και κάτω τελεία, ακολουθούμενη από τιμή:

"firstName":"John"

Τα ονόματα JSON απαιτούν διπλά εισαγωγικά. Τα ονόματα JavaScript όχι.

Αντικείμενα JSON

Τα αντικείμενα JSON είναι γραμμένα μέσα σε σγουρά άγκιστρα.

Όπως και στο JavaScript, τα αντικείμενα μπορούν να περιέχουν πολλά ζεύγη ονόματος/τιμών:

{"firstName":"John", "lastName":"Doe"}

Πίνακες JSON

Οι πίνακες JSON είναι γραμμένοι μέσα σε αγκύλες.

Όπως και στο JavaScript, ένας πίνακας μπορεί να περιέχει αντικείμενα:

"employees":[
   
{"firstName":"John", "lastName":"Doe"}, 
   
{"firstName":"Anna", "lastName":"Smith"}, 
   
{"firstName":"Peter", "lastName":"Jones"}
]

Στο παραπάνω παράδειγμα, το αντικείμενο "εργαζόμενοι" είναι ένας πίνακας. Περιέχει τρία αντικείμενα.

Κάθε αντικείμενο είναι μια εγγραφή ενός ατόμου (με όνομα και επίθετο).

Μετατροπή κειμένου JSON σε αντικείμενο JavaScript

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

Για απλότητα, αυτό μπορεί να αποδειχθεί χρησιμοποιώντας μια συμβολοσειρά ως είσοδο.

Αρχικά, δημιουργήστε μια συμβολοσειρά JavaScript που περιέχει σύνταξη JSON:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Στη συνέχεια, χρησιμοποιήστε την ενσωματωμένη συνάρτηση JavaScript JSON.parse() για να μετατρέψετε τη συμβολοσειρά σε αντικείμενο JavaScript:

const obj = JSON.parse(text);

Τέλος, χρησιμοποιήστε το νέο αντικείμενο JavaScript στη σελίδα σας:

Παράδειγμα

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Μπορείτε να διαβάσετε περισσότερα για το JSON στο σεμινάριο JSON.