JS read csv file and populate input tags

Issue

I have a HTML file with Input tags. The csv file has two rows, row one equals the "id" of the input tag and row two is the value.

How can I loop through row 1 to get the input id and populate it with the value from row 2?

There will just be the two rows.

        var fileSelector = document.getElementById('f_csv');
        fileSelector.addEventListener('change', (event) => {
            const fileList = event.target.files;
            console.log(fileList);
        });

        label {
            display: block;
            font: 1rem 'Fira Sans', sans-serif;
        }

        input,
        label {
            margin: 0.4rem 0;
        }

 

    <h1>Open CSV and fill input boxes</h1>
    <div>
        <!-- The `multiple` attribute lets users select multiple files. -->
        <input type="file" id="f_csv">
        <script>
            var fileSelector = document.getElementById('f_csv');
            fileSelector.addEventListener('change', (event) => {
                const fileList = event.target.files;
                console.log(fileList);
            });
        </script>


        <label for="f_name">First Name:</label>
        <input type="text" id="f_name" name="f_name" value="" />
        <label for="l_name">Last Name:</label>
        <input type="text" id="l_name" name="l_name" value="" />
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" value="" />

    </div>

f_name,l_name,age
Francis,AppleSeed,22

Solution

Here is an adapted version of your code, this should work in the way you requested.

        var fileSelector = document.getElementById('f_csv');
        fileSelector.addEventListener('change', (event) => {
            const fileList = event.target.files;
            console.log(fileList);
        });

        label {
            display: block;
            font: 1rem 'Fira Sans', sans-serif;
        }

        input,
        label {
            margin: 0.4rem 0;
        }

 

    <h1>Open CSV and fill input boxes</h1>
    <div>
        <input type="file" id="f_csv">
        <script>
    var fileSelector = document.getElementById('f_csv');
    fileSelector.addEventListener('change', (event) => {
        const fileList = event.target.files;
        const reader = new FileReader();

        reader.onload = function(event) {
            const content = event.target.result;
            const rows = content.split('\n');
            const ids = rows[0].split(',');  // Split first row to get IDs
            const values = rows[1].split(','); // Split second row to get values

            for (let i = 0; i < ids.length; i++) {
                const element = document.getElementById(ids[i].trim());
                if (element) {
                    element.value = values[i].trim();
                }
            }
        };

        reader.readAsText(fileList[0]);
    });
</script>


        <label for="f_name">First Name:</label>
        <input type="text" id="f_name" name="f_name" value="" />
        <label for="l_name">Last Name:</label>
        <input type="text" id="l_name" name="l_name" value="" />
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" value="" />

    </div>

Answered By - Julius