HTML/JS: How we bind a JSON variable to HTML elements

General APL language issues

HTML/JS: How we bind a JSON variable to HTML elements

Postby PGilbert on Sat May 22, 2021 12:37 pm

We would like to share what we do to update multiple HTML elements with JS and a JSON variable.

First, the HTML element must have a 'data-bind' attribute that is using a global JSON variable:

Code: Select all
<label data-bind="_SchAbv[_Status.DB.Control[_KI]]"></label>


Second, you call the following function with a container that will execute the content of all the data-bind attributes:

Code: Select all
function LoadFromData(containerID) {
    // Write the value of a global variable to the inputs. Works with 'SaveFormData'
    // Valid expression is included in the data-bind attribute.
    // containerID = ID of the DIV container with the #
    let temp = "not initialize";
    try {
        // Write the global variable to all the number inputs.
        let inputNumber = document.querySelectorAll(containerID + " input[type=number][data-bind]");
        inputNumber.forEach(obj => obj.value = eval(temp = obj.dataset.bind));

        // Write the global variable to all the number texts.
        let inputText = document.querySelectorAll(containerID + " input[type=text][data-bind]");
        inputText.forEach(obj => obj.value = eval(temp = obj.dataset.bind));

        // Write the global variable to all the checkbox inputs.
        let inputCheckbox = document.querySelectorAll(containerID + " input[type=checkbox][data-bind]");
        inputCheckbox.forEach(obj => obj.checked = Boolean(eval(temp = obj.dataset.bind)));

        // Write the global variable to all the email inputs.
        let inputEmail = document.querySelectorAll(containerID + " input[type=email][data-bind]");
        inputEmail.forEach(obj => obj.value = eval(temp = obj.dataset.bind));

        // Write the global variable to all <label>s.
        let inputLabel = document.querySelectorAll(containerID + " label[data-bind]");
        inputLabel.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));

        // Write the global variable to all the <select>s.
        let inputSelect = document.querySelectorAll(containerID + " select[data-bind]");
        inputSelect.forEach(obj => obj.value = eval(temp = obj.dataset.bind));

        // Write the global variable to all the <td>s.
        let inputTd = document.querySelectorAll(containerID + " td[data-bind]");
        inputTd.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));

        // Write the global variable to all the <text> inputs
        let Text = document.querySelectorAll(containerID + " text[data-bind]");
        Text.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));

        // Write the global variable to all the <textarea> inputs
        let Textarea = document.querySelectorAll(containerID + " textarea[data-bind]");
        //Textarea.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));
        //Textarea.forEach(obj => obj.value = decodeURI(eval(temp = obj.dataset.bind)));
        Textarea.forEach(obj => obj.innerHTML = decodeURI(eval(temp = obj.dataset.bind)));

        // Write the global variable to all the <polyline>
        let polyline = document.querySelectorAll(containerID + " polyline[data-bind]");
        polyline.forEach(obj => obj.setAttribute("points", eval(temp = obj.dataset.bind)));

    } catch {
        MessageBox(1000, "LoadFromData Error evaluating: " + temp);
    }
}


And to save values to a global JSON variable:

Code: Select all
function SaveToData(containerID) {
    // Write the value of inputs[number, checkbox, email] and <select> to a global variable.
    // Valid expression is included in the data-bin attribute.
    // containerID = ID of the DIV container with the #
    let temp = "not initialize";
    try {
        // Write all Number inputs to the global variable.
        let inputNumber = document.querySelectorAll(containerID + " input[type=number][data-bind]");
        inputNumber.forEach(obj => eval(temp = obj.dataset.bind + " = " + obj.value));

        let inputText = document.querySelectorAll(containerID + " input[type=text][data-bind]:not([disabled])");
        inputText.forEach(obj => eval(temp = obj.dataset.bind + " = " + obj.value));

        // Write all the Checkbox inputs to the global variable.
        let inputCheckbox = document.querySelectorAll(containerID + " input[type=checkbox][data-bind]");
        inputCheckbox.forEach(obj => eval(temp = obj.dataset.bind + " =" + Number(obj.checked)));

        // Write all the Email inputs to the global variable.
        let inputEmail = document.querySelectorAll(containerID + " input[type=email][data-bind]");
        inputEmail.forEach(obj => eval(temp = obj.dataset.bind + " = '" + obj.value + "'"));

        // Write all the Selects to the global variable.
        let inputSelect = document.querySelectorAll(containerID + " select[data-bind]");
        inputSelect.forEach(obj => eval(temp = obj.dataset.bind + " = '" + obj.value + "'"));

        // Write all the TextArea to the global variable.
        let Textarea = document.querySelectorAll(containerID + " textarea[data-bind]");
        Textarea.forEach(obj => eval(temp = obj.dataset.bind + "='" + _escape(obj.innerHTML) + "'"));

    } catch {
        MessageBox(1000, "SaveToData Error evaluating: " + temp);

    }
}


Comments and suggestions for improvements are welcome.
User avatar
PGilbert
 
Posts: 419
Joined: Sun Dec 13, 2009 8:46 pm
Location: Montréal, Québec, Canada

Return to Language

Who is online

Users browsing this forum: No registered users and 1 guest