https://cool-car-man.netlify.app/js/utility.js

1/**
2 * Populate form fields from a JSON object.
3 *
4 * @param form object The form element containing your input fields.
5 * @param data object JSON data to populate the fields with.
6 * @param basename string Optional basename which is added to `name` attributes
7 */
8
9export function populate(form, data) {
10  // walk the object
11  for (const key in data) {
12    // if this is a system property then bail...
13    if (!data.hasOwnProperty(key)) {
14      continue;
15    }
16
17    // get key/value for inputs
18    let name = key;
19    let value = data[key];
20
21    // Make any bad values an empty string
22    if (!value && value !== 0) {
23      value = "";
24    }
25
26    // try to find element in the form
27    const element = form.elements[name];
28
29    // If we can't then bail
30    if (!element) {
31      continue;
32    }
33
34    // see what type an element is to handle the process differently
35    const type = element.type || element[0].type;
36
37    switch (type) {
38      case "checkbox": {
39        // Here, value is an array of values to be spread across the checkboxes that make up this input. It's the value of the input as a whole, NOT the value of one checkbox.
40        const values = Array.isArray(value) ? value : [value];
41
42        for (let j = 0, len = element.length; j < len; j += 1) {
43          const thisCheckbox = element[j];
44          if (values.includes(thisCheckbox.value)) {
45            thisCheckbox.checked = true;
46          }
47        }
48        break;
49      }
50      case "select-multiple": {
51        const values = Array.isArray(value) ? value : [value];
52
53        for (let k = 0, len = element.options.length; k < len; k += 1) {
54          const thisOption = element.options[k];
55          if (values.includes(thisOption.value)) {
56            thisOption.selected = true;
57          }
58        }
59        break;
60      }
61      // case "select":
62      // case "select-one":
63      //   element.value = value.toString() || value;
64      //   break;
65
66      // case "date":
67      //   element.value = new Date(value).toISOString().split("T")[0];
68      //   break;
69
70      // text boxes
71      default:
72        element.value = value; // { age: 32 }
73        break;
74    }
75  }
76}