JSON.parse()

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

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

Κατά τη λήψη δεδομένων από διακομιστή web, τα δεδομένα είναι πάντα μια συμβολοσειρά.

Αναλύστε τα δεδομένα με JSON.parse() και τα δεδομένα γίνονται αντικείμενο JavaScript.

Παράδειγμα - Ανάλυση JSON

Φανταστείτε ότι λάβαμε αυτό το κείμενο από έναν διακομιστή ιστού:

'{"name":"John", "age":30, "city":"New York"}'

Χρησιμοποιήστε τη συνάρτηση JavaScript JSON.parse() για να μετατρέψετε κείμενο σε αντικείμενο JavaScript:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New 
  York"}');

Βεβαιωθείτε ότι το κείμενο είναι σε μορφή JSON, διαφορετικά θα εμφανιστεί ένα συντακτικό σφάλμα.

Χρησιμοποιήστε το αντικείμενο JavaScript στη σελίδα σας:

Παράδειγμα

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

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

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

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

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

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

Πίνακας ως JSON

Όταν χρησιμοποιείτε το JSON.parse() σε ένα JSON που προέρχεται από έναν πίνακα, η μέθοδος θα επιστρέψτε έναν πίνακα JavaScript, αντί για ένα αντικείμενο JavaScript.

Παράδειγμα

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

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

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

Εξαιρέσεις

Ανάλυση Ημερομηνιών

Τα αντικείμενα ημερομηνίας δεν επιτρέπονται στο JSON.

Εάν πρέπει να συμπεριλάβετε μια ημερομηνία, γράψτε τη ως συμβολοσειρά.

Μπορείτε να το μετατρέψετε ξανά σε αντικείμενο ημερομηνίας αργότερα:

Παράδειγμα

Μετατροπή συμβολοσειράς σε ημερομηνία:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

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

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε τη δεύτερη παράμετρο, της συνάρτησης JSON.parse(), που ονομάζεται reviver.

Η παράμετρος reviver είναι μια συνάρτηση που ελέγχει κάθε ιδιότητα, πριν επιστρέψετε την τιμή.

Παράδειγμα

Μετατρέψτε μια συμβολοσειρά σε ημερομηνία, χρησιμοποιώντας τη συνάρτηση reviver:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

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

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

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

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Συναρτήσεις ανάλυσης

Οι λειτουργίες δεν επιτρέπονται σε JSON.

Εάν χρειάζεται να συμπεριλάβετε μια συνάρτηση, γράψτε τη ως συμβολοσειρά.

Μπορείτε να το μετατρέψετε ξανά σε λειτουργία αργότερα:

Παράδειγμα

Μετατροπή συμβολοσειράς σε συνάρτηση:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

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

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

Θα πρέπει να αποφύγετε τη χρήση συναρτήσεων σε JSON, οι συναρτήσεις θα χάσουν το εύρος τους, και θα πρέπει να χρησιμοποιήσετε το eval() για να τα μετατρέψετε ξανά σε συναρτήσεις.