JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button" id="german" class="searchButton" value="German">German</button>
<div id="resultsView"></div>
JavaScript
var employees = [
{
"firstName": "Alex",
"lastName": "Hagerman",
"language": "German",
"department": "Nuerology",
"position": "Nurse",
"skill": "Infection"},
{
"firstName": "Alex",
"lastName": "Hagerman1",
"language": "English",
"department": "Nuerology",
"position": "Nurse",
"skill": "Infection"},
{
"firstName": "Alex",
"lastName": "Hagerman12",
"language": "French",
"department": "Nuerology",
"position": "Nurse",
"skill": "Infection"},
{
"firstName": "Alex",
"lastName": "Hagerman123",
"language": "German",
"department": "Nuerology",
"position": "Nurse",
"skill": "Infection"},
{
"firstName": "Alex",
"lastName": "Hagerman56",
"language": "English",
"department": "Nuerology",
"position": "Nurse",
"skill": "Infection"},
];
$(document).ready(function() {
$('button').click(function() {
var buttonValue = $(this).val();
var results = $.grep(employees, function(data) {
return data.language == buttonValue;
})
$.each(results, function(i, employee) {
$('#resultsView').append('<div class="searchResults">' + employee.firstName + employee.lastName + '<br />' + employee.language + '<br />' + employee.department + employee.position + '<br />' + employee.skill + '</div>');
})
});
});