JSON and Data Shapes

Optional Fields

Handle a field that may be blank.

optional-fields Real data may leave a field blank or missing. Code should turn that case into a clear label before displaying it.

Optional Fields

nickname
optional_fields.js
Replay: real traced execution (multi-file project)
const nickname = "";
const text = JSON.stringify({ name: "Nia", nickname: nickname });
const parsedNickname = JSON.parse(text).nickname;
const label = parsedNickname === "" ? "none" : parsedNickname;

console.log("nickname=" + nickname);
console.log("label=" + label);

const nickname = "Ace";
const text = JSON.stringify({ name: "Nia", nickname: nickname });
const parsedNickname = JSON.parse(text).nickname;
const label = parsedNickname === "" ? "none" : parsedNickname;

console.log("nickname=" + nickname);
console.log("label=" + label);

const nickname = "Bee";
const text = JSON.stringify({ name: "Nia", nickname: nickname });
const parsedNickname = JSON.parse(text).nickname;
const label = parsedNickname === "" ? "none" : parsedNickname;

console.log("nickname=" + nickname);
console.log("label=" + label);

  1. nickname ← (empty), text ← {"name":"Nia","nickname":""}, parsedNickname ← (empty)

    1const nickname→ (empty) = ""; //@nickname="Ace", "Bee"2const text→ {"name":"Nia","nickname":""} = JSON.stringify({ name: "Nia", nickname: nickname(empty) });3const parsedNickname→ (empty) = JSON.parse(text{"name":"Nia","nickname":""}).nickname;4const label→ none = parsedNickname→ (empty) === "" ? "none" : parsedNickname;56console.log("nickname=" + nickname(empty));7console.log("label=" + labelnone);
    outputnickname=
label=none

  1. nickname ← Ace, text ← {"name":"Nia","nickname":"Ace"}, parsedNickname ← Ace

    1const nickname→ Ace = "Ace";2const text→ {"name":"Nia","nickname":"Ace"} = JSON.stringify({ name: "Nia", nickname: nicknameAce });3const parsedNickname→ Ace = JSON.parse(text{"name":"Nia","nickname":"Ace"}).nickname;4const label→ Ace = parsedNickname→ Ace === "" ? "none" : parsedNickname;56console.log("nickname=" + nicknameAce);7console.log("label=" + labelAce);
    outputnickname=Ace
label=Ace

  1. nickname ← Bee, text ← {"name":"Nia","nickname":"Bee"}, parsedNickname ← Bee

    1const nickname→ Bee = "Bee";2const text→ {"name":"Nia","nickname":"Bee"} = JSON.stringify({ name: "Nia", nickname: nicknameBee });3const parsedNickname→ Bee = JSON.parse(text{"name":"Nia","nickname":"Bee"}).nickname;4const label→ Bee = parsedNickname→ Bee === "" ? "none" : parsedNickname;56console.log("nickname=" + nicknameBee);7console.log("label=" + labelBee);
    outputnickname=Bee
label=Bee