JSON and Data Shapes

Nested JSON

Read values from a nested JSON shape.

nested-json JSON can contain objects inside objects. Use one property access per level to reach a nested field.

Nested JSON

city
nested_json.js
Replay: real traced execution (multi-file project)
const city = "Austin";
const text = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city + "\"},\"active\":true}";
const name = JSON.parse(text).user.name;
const userCity = JSON.parse(text).user.city;
const active = JSON.parse(text).active;

console.log("name=" + name);
console.log("city=" + userCity);
console.log("active=" + active);

const city = "Boston";
const text = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city + "\"},\"active\":true}";
const name = JSON.parse(text).user.name;
const userCity = JSON.parse(text).user.city;
const active = JSON.parse(text).active;

console.log("name=" + name);
console.log("city=" + userCity);
console.log("active=" + active);

const city = "Denver";
const text = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city + "\"},\"active\":true}";
const name = JSON.parse(text).user.name;
const userCity = JSON.parse(text).user.city;
const active = JSON.parse(text).active;

console.log("name=" + name);
console.log("city=" + userCity);
console.log("active=" + active);

  1. city ← Austin, text ← {"user":{"name":"Mira","city":"Austin"},"active":true}

    1const city→ Austin = "Austin"; //@city="Boston", "Denver"2const text→ {"user":{"name":"Mira","city":"Austin"},"active":true} = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city→ Austin + "\"},\"active\":true}";3const name→ Mira = JSON.parse(text{"user":{"name":"Mira","city":"Austin"},"active":true}).user.name;4const userCity→ Austin = JSON.parse(text{"user":{"name":"Mira","city":"Austin"},"active":true}).user.city;5const active→ true = JSON.parse(text{"user":{"name":"Mira","city":"Austin"},"active":true}).active;67console.log("name=" + nameMira);8console.log("city=" + userCityAustin);9console.log("active=" + activetrue);
    outputname=Mira
city=Austin
active=true

  1. city ← Boston, text ← {"user":{"name":"Mira","city":"Boston"},"active":true}

    1const city→ Boston = "Boston";2const text→ {"user":{"name":"Mira","city":"Boston"},"active":true} = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city→ Boston + "\"},\"active\":true}";3const name→ Mira = JSON.parse(text{"user":{"name":"Mira","city":"Boston"},"active":true}).user.name;4const userCity→ Boston = JSON.parse(text{"user":{"name":"Mira","city":"Boston"},"active":true}).user.city;5const active→ true = JSON.parse(text{"user":{"name":"Mira","city":"Boston"},"active":true}).active;67console.log("name=" + nameMira);8console.log("city=" + userCityBoston);9console.log("active=" + activetrue);
    outputname=Mira
city=Boston
active=true

  1. city ← Denver, text ← {"user":{"name":"Mira","city":"Denver"},"active":true}

    1const city→ Denver = "Denver";2const text→ {"user":{"name":"Mira","city":"Denver"},"active":true} = "{\"user\":{\"name\":\"Mira\",\"city\":\"" + city→ Denver + "\"},\"active\":true}";3const name→ Mira = JSON.parse(text{"user":{"name":"Mira","city":"Denver"},"active":true}).user.name;4const userCity→ Denver = JSON.parse(text{"user":{"name":"Mira","city":"Denver"},"active":true}).user.city;5const active→ true = JSON.parse(text{"user":{"name":"Mira","city":"Denver"},"active":true}).active;67console.log("name=" + nameMira);8console.log("city=" + userCityDenver);9console.log("active=" + activetrue);
    outputname=Mira
city=Denver
active=true