CODEWITHSUNDEEP
javascriptfunctionif-statement
Jorge Daniel Atuesta
Jorge Daniel Atuesta

Reputation: 89

How to create conditional statement inside of a function in JS using the user input as parameter?

I am trying to build a web page where I have a table. The user can interact with the table if they want to filter any specific date. Here is the code I got so far:

enter code here// from data.js 
var tableData = data;
// Step 1: verify the data by printing the data on the console 
console.log("Here is the data inputed:", tableData);
//Step 2: Using D3 select the tag "body" from html doc
const tbody = d3.select("tbody");
// Step 3: Create a function that will build the table  
function buildTable(data) {
// Step 3.1: Replaces the HTML with a space. 
tbody.html("");
// Step 3.2: Create a checkpoint on the console
console.log("Your table was cleared");
// Step 3.3: Create foreach loop using arrow to paste values inside of the table 
data.forEach((element) => {
    var row = tbody.append("tr");
    Object.entries(element).forEach(([key, value]) => {
        var cell = row.append("td");
        cell.text(value);
    });
});
// Step 3.4: Console log message stating table has been built check for errors inside console log.
console.log("Your table has been built. Double-check the console to inspect for errors highlighted in red");

}

I created this function to handle the click:

function handleClick(data) {
    // Step 5.1: Prevent the page from refreshing
    d3.event.preventDefault();

    // Step 5.1 : Grab the value from the date time search option. The id acording
    // to the html file is #datetime.
    let inputElement = d3.select("#datetime");
    let inputValue = inputElement.property("value");

    // Consol log the input value to double check.
    console.log(inputValue);

    // Create filter data according to user input value
    var filteredData = tableData.filter(data => data.datetime === inputValue);

    // Console log the input value to double check.
    console.log(filteredData);

    // Use builTable to create table
    buildTable(filteredData);

I need to create a conditional inside of my handleClick function so that when a user clicks the button without input the page will just load the buildTable function with the data parameter buildTable(data);I have tried a lot of things but still, aren't being able to get it done. Any ideas?

This is the last part of my code outside the functions:

d3.select("#filter-btn").on("click", handleClick);

// 1. function to filter data Inside of function affter filter add to filter function
// Have a trigger for the function to run  ON.CLICK (Will trigger the function to run)


//Last step: Make the function buildTable run again with original data.
buildTable(data);

Thank you so much for reading my post and helping me!

Upvotes: 0

Views: 277

Answers (1)

Roy
Roy

Reputation: 1967

You can just add a condition where it checks if the user has selected any date or not. If yes then filter the table, else render the whole table. Hope this is what you wanted.

Try the following (Notice the comments marked with <-------):

function handleClick(data) {
    // Step 5.1: Prevent the page from refreshing
    d3.event.preventDefault();

    // Step 5.1 : Grab the value from the date time search option. The id acording
    // to the html file is #datetime.
    let inputElement = d3.select("#datetime");
    let inputValue = inputElement.property("value");

    if(inputValue){ // <------- try adding this condition

        // Consol log the input value to double check.
        console.log(inputValue);

        // Create filter data according to user input value
        var filteredData = tableData.filter(data => data.datetime === inputValue);

        // Console log the input value to double check.
        console.log(filteredData);

        // Use builTable to create table
        buildTable(filteredData);

    }
    else{
        buildTable(tableData); // <------- Here render the default table
    }
}

Upvotes: 1

Related Questions