Tips for implementing the JSON object table filter functionality

Question

Tips for implementing the JSON object table filter functionality

My website features a collection of json objects organized as shown below:

 [
    {
        "a": true or false,
        "b": "information",
        "c": "information",
        "d": "information",
        "e": "information"
    },
    ...
 ]

The goal here is to display all the objects in a table and include a checkbox for filtering out objects with a value of false. Initially, the site was intended to show the full list of unfiltered objects. However, upon adding the checkbox event listener, the entire list disappeared. When toggling the checkbox, it repeatedly adds more filtered content to the bottom of the table.

I'm struggling to identify what I'm doing wrong. The code snippet I've been working with is provided below:

var stuff = document.getElementById("stuff-info");
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'url');
ourRequest.onload = function() {
    var ourData = JSON.parse(ourRequest.responseText);
    renderHTML(ourData);
};
ourRequest.send();

function renderHTML(data) {
    var htmlString = "";
    var filteredData = data.filter(function(element) {
        return element.a
    });
    var checkbox = document.querySelector("input[name=hide]");

    checkbox.addEventListener('change', function() {
        if (this.checked) {
            for (i = 0; i < filteredData.length; i++) {
                htmlString += "<table><tr><td>" + filteredData[i].b + "</td><td>" + filteredData[i].c + "</td><td>" + filteredData[i].d + "</td><td>" + filteredData[i].e + "</td></tr>"
            }
        } else {
            for (i = 0; i < data.length; i++) {
                htmlString += "<table><tr><td>" + data[i].b + "</td><td>" + data[i].c + "</td><td>" + data[i].d + "</td><td>" + data[i].e + "</td></tr>"
            }
        }
        stuff.insertAdjacentHTML('beforeend', htmlString);
    });
}

javascript json

Answer 1

Answer №1

It might be more simple to use a CSS selector for filtering:

#filter:checked ~ table .filter { display: none }

<input type=checkbox id=filter> Filter 

<table border=1>
  <tr class=filter><td>1</td><td>a</td></tr>
  <tr><td>2</td><td>b</td></tr>
  <tr class=filter><td>3</td><td>c</td></tr>
  <tr><td>4</td><td>d</td></tr>
</table>

Answer 2

It might be more simple to use a CSS selector for filtering:

#filter:checked ~ table .filter { display: none }

<input type=checkbox id=filter> Filter 

<table border=1>
  <tr class=filter><td>1</td><td>a</td></tr>
  <tr><td>2</td><td>b</td></tr>
  <tr class=filter><td>3</td><td>c</td></tr>
  <tr><td>4</td><td>d</td></tr>
</table>

Answer 3

Answer №2

As soon as I implemented the checkbox event listener, the entire table list vanished.

The logic for determining what to display is confined within the onchange event, causing no rendering until a checkbox is modified.

Upon checking the checkbox, I noticed that the filtered objects were being continuously added in duplicates.

All html strings are appended using += to the original htmlString variable within the closure, resulting in an ever-growing list of rows. Additionally, new strings are inserted into the DOM without replacing the old tables, leading to an exponential increase.

I believe incorporating higher order functions instead of traditional for loops would be beneficial. By utilizing the map array method to convert each item in the array into a string, the code becomes cleaner and more manageable.

This separation of rendering logic from event handling makes it much simpler to reuse the render function with varying data or events. It also enables easy addition of additional transformations or filters.

const ourRequest = new XMLHttpRequest();
ourRequest.onload = function() {
    const ourData = JSON.parse(ourRequest.responseText);
    initialRender(ourData);
};
ourRequest.open('GET', 'url');
ourRequest.send();

function filterAll() { return true; }
function filterA() { return element.a; }

function toRowString(item) {
  return `
    <tr>
      <td>${item.a}</td>
      <td>${item.b}</td>
      <td>${item.c}</td>
      <td>${item.d}</td>
      <td>${item.e}</td>
    </tr>`;
}

function renderTable(predicate, parentElement, data){
    const rows = data
        .filter(predicate)
        .map(toRowString);

    parentElement.innerHTML = `<table>${rows}</table>`;
}

function initialRender(data) {
    const stuff = document.getElementById("stuff-info");
    const checkbox = document.querySelector("input[name=hide]");

    renderTable(filterAll, stuff, data);

    checkbox.addEventListener('change', function(event) {
        renderTable( 
          event.target.checked ? filterA : filterAll,
          stuff,
          data
        );
    });
}

Answer 4

As soon as I implemented the checkbox event listener, the entire table list vanished.

The logic for determining what to display is confined within the onchange event, causing no rendering until a checkbox is modified.

Upon checking the checkbox, I noticed that the filtered objects were being continuously added in duplicates.

All html strings are appended using += to the original htmlString variable within the closure, resulting in an ever-growing list of rows. Additionally, new strings are inserted into the DOM without replacing the old tables, leading to an exponential increase.

I believe incorporating higher order functions instead of traditional for loops would be beneficial. By utilizing the map array method to convert each item in the array into a string, the code becomes cleaner and more manageable.

This separation of rendering logic from event handling makes it much simpler to reuse the render function with varying data or events. It also enables easy addition of additional transformations or filters.

const ourRequest = new XMLHttpRequest();
ourRequest.onload = function() {
    const ourData = JSON.parse(ourRequest.responseText);
    initialRender(ourData);
};
ourRequest.open('GET', 'url');
ourRequest.send();

function filterAll() { return true; }
function filterA() { return element.a; }

function toRowString(item) {
  return `
    <tr>
      <td>${item.a}</td>
      <td>${item.b}</td>
      <td>${item.c}</td>
      <td>${item.d}</td>
      <td>${item.e}</td>
    </tr>`;
}

function renderTable(predicate, parentElement, data){
    const rows = data
        .filter(predicate)
        .map(toRowString);

    parentElement.innerHTML = `<table>${rows}</table>`;
}

function initialRender(data) {
    const stuff = document.getElementById("stuff-info");
    const checkbox = document.querySelector("input[name=hide]");

    renderTable(filterAll, stuff, data);

    checkbox.addEventListener('change', function(event) {
        renderTable( 
          event.target.checked ? filterA : filterAll,
          stuff,
          data
        );
    });
}

Tips for implementing the JSON object table filter functionality

Answer №1

Answer №2

Similar questions

Access specific keys and values within a JSON array using Ruby

Turn off the background when the automatic popup box appears

Tips for accessing JSON values in JavaScript

Calculating the total sum in Vuejs when an event is triggered

The issue of AngularJS directive failing to update controller variable

Getting a product by its slug can be achieved with Next.js 14 and Sanity by utilizing the capabilities

What is the best way to clear and fill a div without causing it to resize?

Angular 2 ngFor generates a collection of rows and columns forming a single large column

TypeScript compilation error - No overload is compatible with this call

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

Label dynamically generated from user input for radio button option

Tips for adding a picture to a server and applying CSS filters to enhance it

A guide on Implementing PastBack Functionality with AJAX Responses

Change the value of input on onClick event in React

Unraveling Nested JSON with Redshift and PostgreSQL

Setting up the customized filename for precompiled Handlebars templates

Unusually Elevated Frame Rates within Three.js

Begin the Wordpress AJAX Login

Use a conditional statement for each element within the array

What is the best way to create a sortable column that is based on a nested object within data.record?