Exemplo1: JSON Arrays

Script:
var texto1 = '{ "empregados":[' +
'{"firstName":"José","lastName":"Mané" },' +
'{"firstName":"Olivia","lastName":"Palito" },' +
'{"firstName":"Pedro","lastName":"Xavier" } ]}';
var obj1 = JSON.parse(texto1);
document.getElementById("demo1").innerHTML = obj1.empregados[1].firstName + " " + obj1.empregados[1].lastName;

Funcionamento:

---

Exemplo2: Convertendo JSON em um objeto - function JSON.parse

Script:
var texto2 = '{ "nome":"João", "dtaniv":"2020-05-22", "cidade":"Sertãozinho"}';
var obj = JSON.parse(texto2, function (key, value) {
   if (key == "dtaniv") {
      return new Date(value);
   } else {
      return value;
   }
});
document.getElementById("demo2").innerHTML = obj.nome + ", " + obj.dtaniv;
Funcionamento:

Nota : a data correta seria 22/05/2020 00:00:00 mas ele converteu pelo fuso horario -15Hs

---

exemplo 3 - buscando o json de um arquivo externo

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

Funcionamento:

A resposta deve estar acima e deve ser : Severino

este exemplo falha se for aberto o arquivo html localmente (file:///C:/xampp/htdocs/SiteRefTec/JavaScript/036-JsonObject.html) pelo motivo descrito abaixo.

Importante : por regras de segurança uma aplicação local não pode acessar um arquivo local via web browser sem HTTPS.

Access to XMLHttpRequest at 'file:///C:/xampp/htdocs/SiteRefTec/JavaScript/036-json_demo.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

se a requisição for feita num servidor web...funciona perfeitamente (http://localhost/SiteRefTec/JavaScript/036-JsonObject.html).

exemplo 4 - Convertendo um string em data

Script:
var texto4 = '{ "nome":"Eufrasio", "dtAniv":"1986-12-14", "cidade":"Sertãozinho"}';
var obj4 = JSON.parse(texto4);
obj4.dtAniv = new Date(obj4.dtAniv);
document.getElementById("demo4").innerHTML = obj.nome + ", " + obj4.dtAniv;

Funcionamento:

---

exemplo 5 - Diferenciando tipos de elementos retornados

   No exemplo abaixo o JS devolve strings exceto no campo dtNasc que retorna um objeo data

Retornando o elemento dtNasc que é transformado em data:

Retornando o elemento dtMorte que NÃO é transformado em data:

Script:
var texto5 = '{ "nome":"Policarpo", "dtNasc":"1986-12-14", "dtMorte":"2020-12-14", "cidade":"Caxindro"}';
var obj5 = JSON.parse(texto5, function (key, value) {
   if (key == "dtNasc") {
      return new Date(value);
   } else {
      return value;
   }
});
document.getElementById("demo5").innerHTML = obj5.nome + ", " + obj5.dtNasc;
document.getElementById("demo5_1").innerHTML = obj5.nome + ", " + obj5.dtMorte;
Funcionamento:

---

Exemplo 6 - JSON.Stringfy()

O método JSON.stringify () converte valores em javascript para uma String JSON.
Esses valores podem ser substituídos especificando um substituto de função, ou incluindo apenas como características específicas, quando o array substitui o especificado.

O array original tinha os seguintes dados :{foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};

No exemplo 6 queremos que apenas os parâmetros NÃO string sejam retornados:

Script:
function replacer(key, value) {
   if (typeof value === "string") {
      return undefined;
   }
   return value;
}
var foo = { foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7 };
document.getElementById("demo6").innerHTML = JSON.stringify(foo, replacer);
    Funcionamento:

---

Exemplo 7 - JSON.Stringfy() com LocalStore

Script:
var session = {
   'screens': [],
   'state': true
};
session.screens.push({ 'valor': 'TelaA', 'width': 450, 'height': 250 });
session.screens.push({ 'valor': 'TelaB', 'width': 650, 'height': 350 });
session.screens.push({ 'valor': 'TelaC', 'width': 750, 'height': 120 });
session.screens.push({ 'valor': 'TelaD', 'width': 250, 'height': 60 });
session.screens.push({ 'valor': 'TelaE', 'width': 390, 'height': 120 });
session.screens.push({ 'valor': 'TelaF', 'width': 1240, 'height': 650 });

// Converting the JSON string with JSON.stringify()
// then saving with localStorage in the name of session
localStorage.setItem('session', JSON.stringify(session));

// Example of how to transform the String generated through
// JSON.stringify() and saved in localStorage in JSON object again
var restoredSession = JSON.parse(localStorage.getItem('session'));

// Now restoredSession variable contains the object that was saved
// in localStorage
document.getElementById("demo7").innerHTML = restoredSession.screens[0].valor;

Funcionamento: