Select / JSON to DOM

A select box is also a JSON-driven component.

The runtime does not manually write a select element. It asks for a blueprint, receives JSON, and then delegates the real browser element creation to @keshavsoft/json-to-tag.

1. Input data

const cities = [
  'Hyderabad',
  'Bengaluru',
  'Pune',
  'Mumbai'
];

2. Builder creates the select spec

const spec = jsonRenderBuild({
  type: 'select',
  data: cities,
  targetHtmlId: 'city-select'
});

// spec describes: select + options

3. json-to-tag turns JSON into actual elements

const nodes = jsonToTag(spec);

// creates: HTMLSelectElement + HTMLOptionElement
// one browser element per JSON entry

4. Runtime mounts it

const container = document.getElementById('city-container');
container.append(...nodes);

// json-renderers is the mount layer.
// it is not the code that hand-builds all DOM here.

What the builder output looks like

{
  "type": "select",
  "id": "city-select",
  "children": [
    { "type": "option", "value": "Hyderabad", "text": "Hyderabad" },
    { "type": "option", "value": "Bengaluru", "text": "Bengaluru" },
    { "type": "option", "value": "Pune", "text": "Pune" },
    { "type": "option", "value": "Mumbai", "text": "Mumbai" }
  ]
}

Live render

This is the final browser select created from a declarative JSON spec.