Filter Table Data, and Remove Filtered Column

Question

I am currently using:

function searchNotes() {
    const url = "http://localhost:2609/api/notes"
    $.ajax({
        url: url,
        type: 'GET',
        success: function (notesList) {
            console.log(notesList)
            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < notesList.length; i++) {
                for (var key in notesList[i]) {
                    if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category' || key == 'categoryId')) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1); // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < notesList.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = notesList[i][col[j]];
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("listNotes");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    });
}

to create a html table using jquery. The table looks like this:

I want to filter the table by categoryId, as chosen in the dropdown at the top, then I want to remove the categoryId column. Any ideas how I could achieve this?

Answer 1

You need to use .sort() on the notesList object, something like this:

notesList.sort(function(a, b) {
    return a.categoryId - b.categoryId;
});

Put it before appending the values to the html.

To 'remove' the categoryId column is very simple: Just remove the followingen bit from the if statement:

 || key == 'categoryId'

So your end result is something like this:

function searchNotes() {
    const url = "http://localhost:2609/api/notes"
    $.ajax({
        url: url,
        type: 'GET',
        success: function (notesList) {
            notesList.sort(function(a, b) {
                return a.categoryId - b.categoryId;
            });

            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < notesList.length; i++) {
                for (var key in notesList[i]) {
                    if (col.indexOf(key) === -1 && (key === 'title' || key === 'content' || key == 'category')) {
                        col.push(key);
                    }
                }
            }



            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1); // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < notesList.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = notesList[i][col[j]];
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("listNotes");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    });
}