Using JavaScript to create a JSON object within a table

Question

Using JavaScript to create a JSON object within a table

Currently, I am facing a challenge in creating a JSON object from an HTML table using JavaScript. While I can successfully retrieve the values of each cell in JavaScript, the issue lies in organizing and retrieving them as per my requirements. Here is the code snippet that illustrates how I am currently fetching the values:

var x = document.getElementById("tableId");

for (var i = 0; i < x.rows.length; i++) {
    for (var j = 0; j < x.rows[i].cells.length; j++){
            tableJsonDTO[name] = x.rows[i].cells[j].innerHTML;
    }
}

The table structure is as follows:

header:      company_1      company_2      company_3

Question1    answer_1       answer_1       answer_1

Question2     answer_2       answer_2       answer_2

I aim to extract the values to achieve an object structure like this:

var obj = [{spname:"company_1",qalist:[{question:"",answer:""},{question:"",answer:""}]},
           {spname:"company_2",qalist:[{question:"",answer:""},{question:"",answer:""}]},
           {spname:"company_3",qalist:[{question:"",answer:""},{question:"",answer:""}]}]

If you have any suggestions or solutions on how to approach this problem, please share them. Your input would be greatly appreciated.

javascript json

Answer 1

Answer №1

To efficiently update the values in tableJsonDTO, you just need to adjust how you are assigning them. Check out this helpful demo link.

document.getElementById('toJSON').addEventListener('click', function(){
    var table = document.getElementById('mytable'),
        names = [].slice.call(table.rows[0].cells), 
        values = [].slice.call(table.rows, 1),
        result = {};


    values.forEach(function(row) { //loop through values
        var cells = row.cells,
            title = cells[0].innerHTML; //retrieve property name

        [].forEach.call(cells,function(cell,idx){ //iterate over answers
            var value = {}, 
                arr;
            if(!idx) return; //skip first column

            value[title] = cell.innerHTML; //prepare value

            //obtain or initialize array of values for each name
            arr = result[names[idx].innerHTML] || (result[names[idx].innerHTML] = []);

            arr.push(value); 
        });
    });

    console.log(result);
});

Answer 2

To efficiently update the values in tableJsonDTO, you just need to adjust how you are assigning them. Check out this helpful demo link.

document.getElementById('toJSON').addEventListener('click', function(){
    var table = document.getElementById('mytable'),
        names = [].slice.call(table.rows[0].cells), 
        values = [].slice.call(table.rows, 1),
        result = {};


    values.forEach(function(row) { //loop through values
        var cells = row.cells,
            title = cells[0].innerHTML; //retrieve property name

        [].forEach.call(cells,function(cell,idx){ //iterate over answers
            var value = {}, 
                arr;
            if(!idx) return; //skip first column

            value[title] = cell.innerHTML; //prepare value

            //obtain or initialize array of values for each name
            arr = result[names[idx].innerHTML] || (result[names[idx].innerHTML] = []);

            arr.push(value); 
        });
    });

    console.log(result);
});

Using JavaScript to create a JSON object within a table

Answer №1

Similar questions

What is the method for reaching a service in a different feature module?

Stop mega menu items from disappearing when hovered over

Implementing Firebase pagination alongside Mui-Datatable pagination and sorting capabilities

I am feeling quite lost in trying to figure out how to create a voice mute command using Discord

Error caught: The `onClick` listener was anticipated to be a function, but instead, it was found to be of type `object` in

Javascript problem involving multiple scopes in closures

The data retrieved in JSON format appears to be corrupted and

What are the steps to execute a file on localhost using an HTML page?

Next.js Error: The text displayed on the page differs from the HTML rendered by the server

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

"Step-by-step guide on assigning a class to a Component that has been

Submitting Forms with XMLHttpRequest

Troubleshooting problem in Python/Django: JSON parsing issue on the server

Missing ng-required fields not displaying the has-error validation in AngularJS forms

What is the most efficient method for quickly adding rows to a sqlite database?

Using jQuery to create a dropdown select menu that displays JSON data for each state in the

Accessing HTML elements that are created dynamically in AngularJS

Is it possible to use export default Enum in TypeScript?

Having trouble with the CSS positioning of divs created with JavaScript: it's not behaving as anticipated

Enabling JavaScript functions to accept a variable number of arguments