JSON.parse()

Zwykłe zastosowanie JSON to transfer danych z serwera web.

Dane są zawsze ciągami znaków podczas odbierania danych z serwera web.

Poprzez JSON.parse() Analizuj dane, które staną się obiektem JavaScript.

Przykład – Parsowanie JSON

Wyobraź sobie, że otrzymujemy ten tekst z serwera web:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

Użyj funkcji JavaScript JSON.parse() Przekształć tekst w obiekt JavaScript:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Upewnij się, że ten tekst jest zapisany w formacie JSON, w przeciwnym razie pojawi się błąd składni.

Użyj obiektu JavaScript na swojej stronie:

Przykład

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Spróbuj sam

JSON z serwera

Możesz prosić o JSON z serwera za pomocą żądania AJAX.

Jeśli odpowiedź serwera jest napisana w formacie JSON, możesz przekształcić ciąg znaków w obiekt JavaScript.

Przykład

Użyj XMLHttpRequest do pobrania danych z serwera:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Spróbuj sam

zobacz json_demo.txt

jako tablica JSON

podczas korzystania z JSON pochodzącego z tablicy JSON.parse() po tym, metoda zwróci tablicę JavaScript, a nie obiekt JavaScript.

Przykład

JSON z serwera zwraca tablicę:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Spróbuj sam

Zobacz json_demo_array.txt

Wyjątek

Analiza daty

W JSON nie są dozwolone obiekty daty.

Jeśli potrzebujesz zawrzeć datę, zapisz ją jako ciąg znaków.

Później można go przekształcić z powrotem na obiekt daty:

Przykład

Konwersja łańcucha znaków na datę:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Spróbuj sam

lub możesz użyć JSON.parse() Drugi parametr funkcji, zwany reviver.

ten reviver Parametr jest funkcją, która sprawdzi każdą właściwość przed zwróceniem wartości.

Przykład

Konwersja łańcucha znaków na datę, używając funkcji reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var 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;

Spróbuj sam

Analiza funkcji

W JSON nie są dozwolone funkcje.

Jeśli potrzebujesz zawrzeć funkcję, zapisz ją jako ciąg znaków.

Później można go przekształcić z powrotem na funkcję:

Przykład

Konwersja łańcucha znaków na funkcję:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Spróbuj sam

Powinieneś unikać użycia funkcji w JSON, ponieważ funkcje tracą swoje konteksty, a także musisz użyć eval() Przekształć je z powrotem na funkcje.

Wsparcie przeglądarki

wszystkie główne przeglądarki oraz najnowsze standardy ECMAScript (JavaScript) JSON.parse() funkcja:

Numer w tabeli wskazuje pełne wsparcie JSON.parse() Pierwsza wersja przeglądarki funkcji:

Tak 8.0 3.5 4.0 10.0

Dla starszych przeglądarek, poniższe adresy zawierają dostępne biblioteki JavaScript:

https://github.com/douglascrockford/JSON-js