https://simplemancruise.com/js/vendor/populate.js

1function populate(elements, data, options) {
2    const values = [];
3
4    options = Object.assign(
5        {
6            phpNaming: false,
7            useIndices: false,
8            resetForm: true,
9            identifier: 'id',
10            debug: false,
11        },
12        options
13    );
14
15    function setValueBySelector(parentEl, key, value) {
16        const selector =
17            options.identifier === 'id'
18                ? `#${key}`
19                : `[${options.identifier}="${key}"]`;
20        const target = parentEl.querySelector(selector);
21
22        if (!target) return;
23
24        if (!(window.adapt && window.adapt.set(target, value))) {
25            target.innerHTML = value.toString() === 'null' ? '' : value.toString();
26        }
27    }
28
29    function normalizeFieldName(fieldName) {
30        if (!options.phpNaming) {
31            return fieldName.replace(/\[\]$/, '');
32        }
33        return fieldName;
34    }
35
36    function setValueInForm(formEl, key, value) {
37        const normalizedKey = normalizeFieldName(key);
38        let field = formEl[normalizedKey];
39
40        if (field == null) {
41            const escapedKey = key.replace(/(:|\[|\]|\.)/g, '\\$1');
42            const match = formEl.querySelector(`#${escapedKey}`);
43
44            if (match) {
45                match.innerHTML = value;
46                return true;
47            }
48
49            if (options.debug && window.console && console.log) {
50                console.log(`No such element as ${key}`);
51            }
52
53            return false;
54        }
55
56        const fields =
57            (field.type !== undefined && field.type !== null) || !field.length
58                ? [field]
59                : Array.from(field);
60
61        for (let idx = 0; idx < fields.length; idx++) {
62            field = fields[idx];
63
64            if (
65                !field ||
66                typeof field === 'function' ||
67                (field.getAttribute && field.getAttribute('skip'))
68            ) {
69                continue;
70            }
71
72            switch (field.type || field.tagName) {
73                case 'radio':
74                    field.checked = field.value !== '' && value.toString() === field.value;
75                    break;
76
77                case 'checkbox': {
78                    const checkedValues = Array.isArray(value) ? value : [value];
79                    for (let i = 0; i < checkedValues.length; i++) {
80                        field.checked ||= field.value === checkedValues[i].toString();
81                    }
82                    break;
83                }
84
85                case 'select-multiple': {
86                    const selectedValues = Array.isArray(value) ? value : [value];
87                    for (let i = 0; i < field.options.length; i++) {
88                        for (let j = 0; j < selectedValues.length; j++) {
89                            field.options[i].selected ||=
90                                field.options[i].value === selectedValues[j];
91                        }
92                    }
93                    break;
94                }
95
96                case 'select':
97                case 'select-one': {
98                    const container = document.querySelector(`#${field.id}_container`);
99                    if (container) {
100                        const li = document.querySelector(`li#${field.id}_input_${value}`);
101                        if (li) li.click();
102                    } else {
103                        field.value = value.toString() || value;
104                    }
105                    break;
106                }
107
108                default:
109                    if (!(window.adapt && window.adapt.set(field, value))) {
110                        field.value = value == null ? '' : value;
111                    }
112            }
113        }
114
115        return true;
116    }
117
118    if (data == null) {
119        return elements;
120    }
121
122    (function flattenData(current, path) {
123        const nextPath = path || '';
124
125        if (current == null) return;
126
127        if (current.constructor === Object) {
128            for (const key in current) {
129                const keyPath = nextPath + (nextPath === '' ? key : `[${key}]`);

130                flattenData(current[key], keyPath);
131            }
132            return;
133        }
134
135        if (current.constructor === Array) {
136            for (let i = 0; i < current.length; i++) {
137                let currentIndex = options.useIndices ? i : '';
138                currentIndex = options.phpNaming ? `[${currentIndex}]` : currentIndex;
139                flattenData(current[i], nextPath + currentIndex);
140            }
141            return;
142        }
143
144        if (values[nextPath] === undefined || values[nextPath] === null) {
145            values[nextPath] = current;
146        } else if (values[nextPath].constructor !== Array) {
147            values[nextPath] = [values[nextPath], current];
148        } else {
149            values[nextPath].push(current);
150        }
151    })(data);
152
153    const els = elements instanceof NodeList || Array.isArray(elements)
154        ? Array.from(elements)
155        : [elements];
156
157    els.forEach(function (el) {
158        const tagName = el.tagName.toLowerCase();
159        const writer = tagName === 'form' ? setValueInForm : setValueBySelector;
160
161        if (tagName === 'form' && options.resetForm) {
162            el.reset();
163        }
164
165        for (const key in values) {
166            if (Object.prototype.hasOwnProperty.call(values, key)) {
167                writer(el, key, values[key]);
168            }
169        }
170    });
171
172    return elements;
173}