Locate the table information stored within a nested array structure

Question

Locate the table information stored within a nested array structure

I want to extract data from a table and save it in an array, with each row of the table becoming a sub-array. The HTML structure is as follows:

<table id="contactlisttable">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Joey</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone">5555555</td>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Anthony</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone">5555555</td>
    </tr>
</table>

etc...

This is the code that I am using:

jQuery(document).ready(function(){
    $(function(){
        var $table = $("#contactlisttable"),
        $headerCells = $table.find("tr th"),
        $myrows = $table.find("tr");

        var headers = [],
            rows = [];

        $headerCells.each(function() {
            headers[headers.length] = $(this).text();
        });

        $myrows.each(function() {
            $mycells = $myrows.find( "td.contactlist" );
            cells = []
            $mycells.each(function() {
                cells.push($(this).text());
            });
            if ( cells.length > 0 ) {
                rows.push(cells);
            }  
        });
        console.log(headers);
        console.log(rows);
    }); 
});

The current output of my code is:

[["Waddell, Joey", "webdesigner", "", 15 more...], ["Waddell, Joey", "webdesigner", "", 15 more...],

The desired output should be:

["Name","Title","Phone"]
[["Joey","webdesigner","555555"]
["Anthony","webdesigner","555555"]]

javascript arrays

Answer 1

Answer №1

In my opinion, we can simplify this code:

Check out the Live Demo here

JavaScript:

$(function(){
    var results = []; 
    var row = -1; 
    $('#contactlisttable').find('th, td').each(function(i, val){
        if(i % 3 === 0){ //New Row? 
            results.push([]); 
            row++; //Increment the row counter
        }
        results[row].push(this.textContent || this.innerText); //Add the values (textContent over innerText)       
    }); 
    console.log(results); 
});

UPDATE:

I have discovered an improved solution that is compatible with IE9 and above. It handles variable row lengths better compared to the previous one.

View the Enhanced Live Demo here

JavaScript:

//IE9+ compatible workaround
$(function(){
    var results = [], row; 
    $('#contactlisttable').find('th, td').each(function(){
        if(!this.previousElementSibling){ //New Row?
            row = []; 
            results.push(row); 
        }
        row.push(this.textContent || this.innerText); //Add the values (textContent preferred over innerText)       
    }); 
    console.log(results); 
});

Answer 2

In my opinion, we can simplify this code:

Check out the Live Demo here

JavaScript:

$(function(){
    var results = []; 
    var row = -1; 
    $('#contactlisttable').find('th, td').each(function(i, val){
        if(i % 3 === 0){ //New Row? 
            results.push([]); 
            row++; //Increment the row counter
        }
        results[row].push(this.textContent || this.innerText); //Add the values (textContent over innerText)       
    }); 
    console.log(results); 
});

UPDATE:

I have discovered an improved solution that is compatible with IE9 and above. It handles variable row lengths better compared to the previous one.

View the Enhanced Live Demo here

JavaScript:

//IE9+ compatible workaround
$(function(){
    var results = [], row; 
    $('#contactlisttable').find('th, td').each(function(){
        if(!this.previousElementSibling){ //New Row?
            row = []; 
            results.push(row); 
        }
        row.push(this.textContent || this.innerText); //Add the values (textContent preferred over innerText)       
    }); 
    console.log(results); 
});

Locate the table information stored within a nested array structure

Answer №1

Similar questions

Developing a function to handle form submissions using ajax

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

Utilizing the setInterval function within the componentDidMount lifecycle method in React

Error: Attempting to access the 'name' property of an undefined variable is resulting in a TypeError in Material UI

Replace every item in the array with the corresponding value from the output and add a line break

Learn the steps to import and utilize individual BootStrap 5 JavaScript Plugins

Converting JSON object to an array or list using deserialization

Error triggered by unhandled Promise Rejection when performing Mongoose findOne operation linked to another document

Transforming dynamic tables into JSON format

calculating the rotation angle from the origin to a vector within a three-dimensional space using three.js

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Refining the options in security question dropdown menus

What are the steps to retrieve information from a REST API with basic authentication?

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Using commands like `yarn add` or `npm install --save` does not actually install packages directly to the local project

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

Leveraging the $dirty property in AngularJS to determine if any changes have been made to a form

Is there a way to streamline the form completion process on my website by utilizing voice commands through the user's microphone?

Is there a way to confirm that the content of two files is identical?

What is the process for invoking a server-side function from the client-side in an ASP.NET application?