Browser Data Shapes

Form Payload Shape

Form entries can be converted into an application payload before validation or submission.

form payload Mapping form entries into a typed object gives later code stable property names and predictable conversions.

Form Payload Shape

newsletterChoice
form.ts
Replay: real traced execution (multi-file project)
type SignupPayload = {
    name: string;
    newsletter: boolean;
};

function buildPayload(entries: string[][]): SignupPayload {
    const values: Record<string, string> = {};

    for (const [name, value] of entries) {
        values[name] = value;
    }

    return {
        name: values.name,
        newsletter: values.newsletter === "yes"
    };
}

const newsletterChoice: string = "yes";
const entries: string[][] = [
    ["name", "Ada"],
    ["newsletter", newsletterChoice]
];
const payload: SignupPayload = buildPayload(entries);

console.log(`${payload.name}:${payload.newsletter ? "subscribed" : "skipped"}`);

type SignupPayload = {
    name: string;
    newsletter: boolean;
};

function buildPayload(entries: string[][]): SignupPayload {
    const values: Record<string, string> = {};

    for (const [name, value] of entries) {
        values[name] = value;
    }

    return {
        name: values.name,
        newsletter: values.newsletter === "yes"
    };
}

const newsletterChoice: string = "no";
const entries: string[][] = [
    ["name", "Ada"],
    ["newsletter", newsletterChoice]
];
const payload: SignupPayload = buildPayload(entries);

console.log(`${payload.name}:${payload.newsletter ? "subscribed" : "skipped"}`);

  1. newsletterChoice ← yes, entries ← name,Ada,newsletter,yes

    16    };17}1819const newsletterChoice→ yes: string = "yes";  //@newsletterChoice="no"20const entries→ name,Ada,newsletter,yes: string[][] = [21    ["name", "Ada"],22    ["newsletter", newsletterChoiceyes]23];24const payload: SignupPayload = buildPayload(entriesname,Ada,newsletter,yes);

  2. values ← [object Object], values[name] ← yes

    3    newsletter: boolean;4};56function buildPayload(entriesname,Ada,newsletter,yes: string[][]): SignupPayload {7    const values→ [object Object]: Record<string, string> = {};89    for (const [name, value] of entries) {10        values[name] = valueyes;11    }1213    return {14        name: values.nameAda,15        newsletter: values.newsletter === "yes"16    };17}
    values this stepyesvalues[name]

  3. payload ← [object Object]

    22    ["newsletter", newsletterChoice]23];24const payload→ [object Object]: SignupPayload = buildPayload(entriesname,Ada,newsletter,yes);2526console.log(`${payload.nameAda}:${payload.newslettertrue ? "subscribed" : "skipped"}`);
    outputAda:subscribed

  1. newsletterChoice ← no, entries ← name,Ada,newsletter,no

    16    };17}1819const newsletterChoice→ no: string = "no";20const entries→ name,Ada,newsletter,no: string[][] = [21    ["name", "Ada"],22    ["newsletter", newsletterChoiceno]23];24const payload: SignupPayload = buildPayload(entriesname,Ada,newsletter,no);

  2. values ← [object Object], values[name] ← no

    3    newsletter: boolean;4};56function buildPayload(entriesname,Ada,newsletter,no: string[][]): SignupPayload {7    const values→ [object Object]: Record<string, string> = {};89    for (const [name, value] of entries) {10        values[name] = valueno;11    }1213    return {14        name: values.nameAda,15        newsletter: values.newsletter === "yes"16    };17}
    values this stepnovalues[name]

  3. payload ← [object Object]

    22    ["newsletter", newsletterChoice]23];24const payload→ [object Object]: SignupPayload = buildPayload(entriesname,Ada,newsletter,no);2526console.log(`${payload.nameAda}:${payload.newsletterfalse ? "subscribed" : "skipped"}`);
    outputAda:skipped