Το JSON (JavaScript Object Notation) είναι ένα ανοικτό πρότυπο μορφοποίησης δεδομένων που βασίζεται στη σύνταξη της JavaScript. Χρησιμοποιείται για τη μεταφορά και ανταλλαγή δεδομένων μεταξύ ενός διακομιστή και ενός πελάτη, καθώς και για την αποθήκευση δεδομένων.
Το JSON είναι εύκολα αναγνώσιμο από ανθρώπους και εύκολα κατανοητό από τις περισσότερες γλώσσες προγραμματισμού. Τα δεδομένα JSON αναπαρίστανται σε ένα μορφικό αντικείμενο-πίνακα, με διάφορες εγγραφές δεδομένων.
Εδώ είναι ένα παράδειγμα απλού JSON αντικειμένου:
{
"name": "John",
"age": 30,
"city": "New York"
}
Μπορείτε να χρησιμοποιήσετε τη JavaScript για να αναλύσετε (parse) ή να δημιουργήσετε JSON δεδομένα. Ας δούμε ορισμένες βασικές λειτουργίες JSON στη JavaScript:
Ανάλυση JSON (Parsing JSON)
Για να αναλύσετε ένα JSON και να το μετατρέψετε σε αντικείμενα JavaScript, χρησιμοποιήστε τη μέθοδο JSON.parse():
const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Εμφανίζει: John
console.log(jsonObject.age); // Εμφανίζει: 30
console.log(jsonObject.city); // Εμφανίζει: New York
Δημιουργία JSON (Creating JSON)
Για να δημιουργήσετε ένα JSON από αντικείμενα JavaScript, χρησιμοποιήστε τη μέθοδο JSON.stringify():
const person = {
name: "Jane",
age: 25,
city: "Los Angeles"
};
const jsonString = JSON.stringify(person);
console.log(jsonString); // Εμφανίζει: {"name":"Jane","age":25,"city":"Los Angeles"}
Το JSON είναι ένα ισχυρό εργαλείο για την ανταλλαγή και τη μεταφορά δεδομένων μεταξύ διαφορετικών εφαρμογών και υπηρεσιών.
[adinserter block=”2″]
Η μορφή JSON είναι συντακτικά ταυτόσημη με τον κώδικα για τη δημιουργία αντικειμένων JavaScript.
Λόγω αυτής της ομοιότητας, ένα πρόγραμμα JavaScript μπορεί εύκολα να μετατρέψει τα δεδομένα JSON σε αντικείμενα JavaScript.
Ας δούμε πώς αυτή η μετατροπή λειτουργεί:
// JSON data
const jsonData = '{"name": "Alice", "age": 28, "city": "London"}';
// Parse JSON to JavaScript object
const jsObject = JSON.parse(jsonData);
console.log(jsObject.name); // Εμφανίζει: Alice
console.log(jsObject.age); // Εμφανίζει: 28
console.log(jsObject.city); // Εμφανίζει: London
Στο παραπάνω παράδειγμα, τα δεδομένα JSON μετατρέπονται σε ένα αντικείμενο JavaScript με τη χρήση της μεθόδου JSON.parse(). Αυτό επιτρέπει να προσπελάσετε τα δεδομένα ως αντικείμενα JavaScript, όπως θα κάνατε με οποιοδήποτε άλλο αντικείμενο.
Οι κανόνες σύνταξης για το JSON είναι απλοί και συγκεκριμένοι:
- Αντικείμενα JSON: Το JSON αναπαριστά αντικείμενα με τη μορφή ζεύγους “κλειδί”: “τιμή”. Τα κλειδιά πρέπει να είναι συμβολοσειρές, και πρέπει να προηγείται από διπλά εισαγωγικά. Οι τιμές μπορούν να είναι αντικείμενα JSON, πίνακες, συμβολοσειρές, αριθμοί, λογικές τιμές (true ή false), ή την τιμή null.
- Πίνακες JSON: Οι πίνακες αναπαριστώνται με μια λίστα τιμών μέσα σε αγκύλες. Οι τιμές μπορούν να είναι οποιοδήποτε τύπος δεδομένων όπως προαναφέρθηκε.
- Συμβολοσειρές JSON: Οι συμβολοσειρές πρέπει να περιβάλλονται με διπλά εισαγωγικά. Χρησιμοποιείστε διπλά εισαγωγικά (
") και όχι μονά εισαγωγικά ('). - Αριθμοί JSON: Οι αριθμοί μπορούν να είναι ακέραιοι ή δεκαδικοί αριθμοί, με ή χωρίς κλασματικό μέρος. Δεν υποστηρίζει διαχωριστικά χιλιάδων με κόμμα ή δεκαδικά με τοπική καθοριστική σήμανση (π.χ. 1,000.00).
- Λογικές Τιμές JSON: Οι λογικές τιμές μπορούν να είναι true ή false, γράφονται χωρίς εισαγωγικά.
- Τιμή JSON
null: Η τιμή null αναπαριστά την έλλειψη τιμής ή το κενό.
Παράδειγμα JSON:
{
"name": "John",
"age": 30,
"isStudent": false,
"city": null,
"hobbies": ["reading", "swimming"],
"address": {
"street": "123 Main St",
"zip": "12345"
}
}
Οι κανόνες σύνταξης για το JSON είναι αυστηροί και πρέπει να τηρούνται προσεκτικά κατά την κατασκευή και τον χειρισμό των δεδομένων JSON.
Τα δεδομένα JSON ακολουθούν το σχήμα “όνομα: τιμή”. Κάθε στοιχείο JSON αποτελείται από ένα όνομα και μια τιμή, τα οποία διαχωρίζονται με ένα άνω και κάτω τελεία (:). Αυτό το ζεύγος “όνομα: τιμή” αναπαριστά μια ιδιότητα του αντικειμένου JSON.
Εδώ είναι ένα παράδειγμα JSON με διάφορες ιδιότητες:
{
"name": "Alice",
"age": 28,
"isStudent": false,
"city": "New York"
}
- Στο παράδειγμα αυτό, το όνομα “name” έχει την τιμή “Alice”.
- Το όνομα “age” έχει την τιμή 28.
- Το όνομα “isStudent” έχει την τιμή false.
- Το όνομα “city” έχει την τιμή “New York”.
Κάθε ιδιότητα του αντικειμένου JSON παρουσιάζεται ως ζεύγος “όνομα: τιμή” και διαχωρίζεται από τις υπόλοιπες με ένα κόμμα, εκτός της τελευταίας.
Στο JSON, τα αντικείμενα είναι δομές δεδομένων που αναπαριστούν μια συλλογή από ιδιοτήτων (ή κλειδιά) και τις αντίστοιχες τιμές τους. Τα αντικείμενα JSON περικλείονται με αγκύλες {} και περιλαμβάνουν μια ή περισσότερες ιδιότητες.
Εδώ είναι ένα παράδειγμα αντικειμένου JSON:
{
"name": "John",
"age": 30,
"city": "New York"
}
Στο παραπάνω παράδειγμα:
- Το αντικείμενο JSON περικλείεται με αγκύλες
{}. - Έχει τρεις ιδιότητες: “name”, “age” και “city”.
- Η ιδιότητα “name” έχει την τιμή “John”.
- Η ιδιότητα “age” έχει την τιμή 30.
- Η ιδιότητα “city” έχει την τιμή “New York”.
Τα αντικείμενα JSON μπορούν να περιέχουν εμφωλευμένα αντικείμενα ή πίνακες, δημιουργώντας ιεραρχίες δεδομένων.
[adinserter block=”3″]
Τα πίνακες JSON είναι δομές δεδομένων που αναπαριστούν μια σειρά τιμών. Οι τιμές αυτές μπορούν να είναι οποιοδήποτε τύποι δεδομένων, συμπεριλαμβανομένων συμβολοσειρών, αριθμών, αντικειμένων JSON, πινάκων JSON, λογικών τιμών και της τιμής null. Τα στοιχεία των πινάκων JSON διαχωρίζονται με κόμματα.
Εδώ είναι ένα παράδειγμα πίνακα JSON:
{
"fruits": ["apple", "banana", "orange"]
}
Στο παραπάνω παράδειγμα:
- Το αντικείμενο JSON περιέχει μια ιδιότητα με όνομα “fruits”.
- Η ιδιότητα “fruits” περιέχει έναν πίνακα JSON.
- Ο πίνακας JSON περιέχει τρεις τιμές: “apple”, “banana” και “orange”.
Οι πίνακες JSON μπορούν να περιέχουν οποιοδήποτε αριθμό τιμών και μπορούν να είναι εμφωλευμένοι μέσα σε αντικείμενα JSON ή άλλους πίνακες JSON, δημιουργώντας πολύπλοκες δομές δεδομένων.
Η μετατροπή ενός κειμένου JSON σε ένα αντικείμενο JavaScript γίνεται χρησιμοποιώντας τη μέθοδο JSON.parse(). Αυτή η μέθοδος δέχεται ως είσοδο ένα κείμενο JSON και επιστρέφει ένα αντικείμενο JavaScript που αντιστοιχεί στα δεδομένα JSON.
Εδώ είναι ένα παράδειγμα:
const jsonString = '{"name": "John", "age": 30, "city": "New York"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Εμφανίζει: John
console.log(jsonObject.age); // Εμφανίζει: 30
console.log(jsonObject.city); // Εμφανίζει: New York
Στο παραπάνω παράδειγμα, το κείμενο JSON περνιέται στη μέθοδο JSON.parse(), η οποία μετατρέπει το κείμενο JSON σε ένα αντικείμενο JavaScript. Στη συνέχεια, μπορούμε να προσπελάσουμε τα δεδομένα του αντικειμένου JavaScript όπως θα κάναμε με οποιοδήποτε άλλο αντικείμενο.
Ένα παράδειγμα που συνδυάζει HTML και JavaScript για τη μετατροπή ενός κειμένου JSON σε ένα αντικείμενο JavaScript και την εμφάνιση των δεδομένων:
<!DOCTYPE html>
<html>
<head>
<title>JSON to JavaScript Example</title>
</head>
<body>
<h2>JSON to JavaScript Example</h2>
<p id="jsonText">{"name": "John", "age": 30, "city": "New York"}</p>
<script>
// Get the JSON text from the HTML element
const jsonTextElement = document.getElementById("jsonText");
const jsonString = jsonTextElement.textContent;
// Parse the JSON and convert it to a JavaScript object
const jsonObject = JSON.parse(jsonString);
// Display the data
document.write("<p>Name: " + jsonObject.name + "</p>");
document.write("<p>Age: " + jsonObject.age + "</p>");
document.write("<p>City: " + jsonObject.city + "</p>");
</script>
</body>
</html>
Σε αυτό το παράδειγμα, το κείμενο JSON περιλαμβάνεται στο στοιχείο <p> με id="jsonText". Στη συνέχεια, η JavaScript μετατρέπει το κείμενο JSON σε ένα αντικείμενο JavaScript χρησιμοποιώντας την JSON.parse(). Τέλος, τα δεδομένα εμφανίζονται μέσω της document.write().
Ανοίξτε αυτό το αρχείο HTML σε έναν ιστότοπο ή σε έναν τοπικό φυλλομετρητή για να δείτε τα αποτελέσματα.