JavaScript: using onchange to filter data using a drop-down menu

Question

My goal is filter data based on a user's selection in a drop-down menu.

SET UP

I have an array of objects named employees. First, I sort by the salary attribute, then using another function manipulateData(), I filter by role attribute (which the user selects via a drop-down menu).

(notice in the HTML file that the manipulateData() function is called onchange)

Here is my code:

JavaScript:

let employees = [
    {
        id : 1,
        name : 'John Smith',
        role : 'Sales',
        salary : 100000
    },

    {
        id : 2,
        name : 'Mary Jones',
        role : 'Finance',
        salary : 78000,
    },

    {
        id : 3,
        name : 'Philip Lee',
        role : 'Finance',
        salary : 160000,
    },

    {
        id : 4,
        name : 'Susan Williams',
        role : 'Sales',
        salary : 225000,
    },

    {
        id : 5,
        name : 'Jason Alexander',
        role : 'Finance',
        salary : 90000,
    },

     {
        id : 6,
        name : 'Derek Sanders',
        role : 'Sales',
        salary : 140000,
    }

]

// #########################################

function filterData() {
    let allData = employees;

    let selectBox = document.getElementById("employee-role");
    let selectedValue = selectBox.options[selectBox.selectedIndex].value;

    // SORT SALARIES DESCENDING
    allData.sort(function (a, b) {
        return b.salary - a.salary;
    })

    console.log('Sorted Data', allData);

    // *** Here is where I'd like to invoke the dataManipulation() function to filter on only the user-selected roles

    // LIMIT TO ONLY 2 RECORDS
    let filteredData = allData.filter( (value, index) => {
        return (index < 2);
    });


    // RENDER THE CHART
    //renderChart(filteredData);
}

function manipulateData(filteredData) {
    return filteredData.filter(e => e.role === selectedValue)
}

HTML:

Question: before I reduce the size of the data set to 2 records, how would I incorporate the manipulateData() function to grab only the role selected by the user via the drop-down menu?

Thanks! (JavaScript newbie here)

Nick Vu · Answer

You can call manipulateData(allData, selectedValue) directly with your data set. After this, you can remove onchange="manipulateData()" in your HTML.

let employees = [{
    id: 1,
    name: 'John Smith',
    role: 'Sales',
    salary: 100000
  },
  {
    id: 2,
    name: 'Mary Jones',
    role: 'Finance',
    salary: 78000,
  },
  {
    id: 3,
    name: 'Philip Lee',
    role: 'Finance',
    salary: 160000,
  },
  {
    id: 4,
    name: 'Susan Williams',
    role: 'Sales',
    salary: 225000,
  },
  {
    id: 5,
    name: 'Jason Alexander',
    role: 'Finance',
    salary: 90000,
  },
  {
    id: 6,
    name: 'Derek Sanders',
    role: 'Sales',
    salary: 140000,
  }
]

function filterData() {
  let allData = employees;

  let selectBox = document.getElementById("employee-role");
  let selectedValue = selectBox.options[selectBox.selectedIndex].value;

  // SORT SALARIES DESCENDING
  allData.sort(function(a, b) {
    return b.salary - a.salary;
  })

  //call `manipulateData` and pass `allData` to the param for filtering
  let filteredData = manipulateData(allData, selectedValue)

  // LIMIT TO ONLY 2 RECORDS
  filteredData = filteredData.filter((value, index) => {
    return (index < 2);
  });

  console.log(filteredData)
  // RENDER THE CHART
  //renderChart(filteredData);
}

function manipulateData(filteredData, selectedValue) {
  if(selectedValue === "All") {
    return filteredData;//skip this logic, if the value is `All`
  }

  return filteredData.filter(e => e.role === selectedValue)
}

Note that I added Check filtered data for the demo purpose. You can remove it and fill in other elements at your needs.

zer00ne · Answer

You want to modify the results down to the top two earners after the data is filtered.

filteredByRole.slice(0, 2);

Details are commented in example

const employees = [{
  id: 1,
  name: 'John Smith',
  role: 'Sales',
  salary: 100000
}, {
  id: 2,
  name: 'Mary Jones',
  role: 'Finance',
  salary: 78000
}, {
  id: 3,
  name: 'Philip Lee',
  role: 'Finance',
  salary: 160000
}, {
  id: 4,
  name: 'Susan Williams',
  role: 'Sales',
  salary: 225000
}, {
  id: 5,
  name: 'Jason Alexander',
  role: 'Finance',
  salary: 90000
}, {
  id: 6,
  name: 'Derek Sanders',
  role: 'Sales',
  salary: 140000
}];

const data = employees.sort((a, b) => b.salary - a.salary);

// Declare empty array outside of function
let filteredByRole = [];

// Register the  to a variable
  const role = this.value;
  /* 
  If 
  */
  if (role === "All") {
    filteredByRole = data.slice(0);
  } else {
    filteredByRole = data.filter(employee => employee.role === role);
  }
  // Log the filtered data
  console.log("Filtered by Role: ");
  console.log(JSON.stringify(filteredByRole));
  console.log("|||||||||||||||||||||||||||||");
  // Log the data for the top 2 earners
  console.log("Top two Earners by Role: ");
  console.log(JSON.stringify(filteredByRole.slice(0, 2)));
  console.log("|||||||||||||||||||||||||||||");
}

JavaScript: using onchange to filter data using a drop-down menu

2 Answers