Get a word from a variable that has more than one word, with jQuery

Question

I have a JSON file with employee data, like full name, date of birth, marital status, position, salary. I need to show through a filter by name or surname, regardless of case or minuscule:

Example:

[
    {"nome_com":"Juan Carlos Herbas Mota",
         "data_na":"21/01/1988",
         "estado_c":"Casado",
         "cargo":"Gerente",
         "Salario":"8500"
    },
    {"nome_com":"Luis Hernan Dias Pato",
         "data_na":"12/10/1960",
         "estado_c":"Solteiro",
         "cargo":"Contador",
         "Salario":"8500"
    }
]

With jQuery code, I need to show the data for example of Mr, Herbas

Putting in the form in the input: "herbas" must show all the data of this person.

Answer 1

You can iterate JSON searching the results with for, converting the search string and where it will be fetched in lowercase to avoid the case sensitive:

var data = [
   {"nome_com":"Juan Carlos Herbas Mota", "data_na":"21/01/1988", "estado_c":"Casado", "cargo":"Gerente", "Salario":"8500" },
   {"nome_com":"Luis Hernan Dias Pato", "data_na":"12/10/1960", "estado_c":"Solteiro", "cargo":"Contador", "Salario":"8500" }
];

function buscar(){
   
   var nome = $("#nome").val().toLowerCase(),
   resultados = '';

   for(var item of data){
      
      if(~item.nome_com.toLowerCase().indexOf(nome)){
         
         for(var dados in item) {
             resultados += dados+": "+item[dados]+"<br>";
         };
         
         $("#resultado").html(resultados);
         break;
         
      }
   
   }
   
   if(!resultados) $("#resultado").text("Nada encontrado");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="nome" value="herbas">
<br>
<button type="button" onclick="buscar()">Buscar</button>
<br>
<div id="resultado"></div>

The first for with of takes each object from the array. The second for with in takes the values of keys of the object (item[dados]). If you find nothing, the value of resultados will be false.

Answer 2

To complement the already good @dvd response, I put here another solution using filter and indexOf and toLowerCase.

First approach with filter and indexOf

Using the above two functions to filter people can do:

const pessoasFiltradas=pessoas.filter(pessoa=>pessoa.nome_com.indexOf(filtro)!=-1);

And only with this line of code does the filter you need. Let’s try to detail as much as possible this line of code:

• We’re saying that pessoasFiltradas corresponds to the execution of the filter
• The filter which filters based on the function passed
• In the above example, filter if the pessoa.nome_com contains the text in filtro
• The indexOf return -1 if it does not exist, that is to say if it does not contain the text passed

Note however that there is no upper and lower case code so you have to write Herbas to work.

View and experiment with Herbas:

const pessoas = [
    {"nome_com":"Juan Carlos Herbas Mota",
         "data_na":"21/01/1988",
         "estado_c":"Casado",
         "cargo":"Gerente",
         "Salario":"8500"
    },
    {"nome_com":"Luis Hernan Dias Pato",
         "data_na":"12/10/1960",
         "estado_c":"Solteiro",
         "cargo":"Contador",
         "Salario":"8500"
    }
];

const procura = document.getElementById("procura");

document.getElementById("procurar").addEventListener("click", function(){
  let filtro = procura.value;
  const pessoasFiltradas = pessoas.filter(pessoa => pessoa.nome_com.indexOf(filtro) != -1);
  console.log(pessoasFiltradas);
});

<input type="text" id="procura" placeholder="Pessoa a procurar">
<input type="button" id ="procurar" value="Procurar">

Checking if there are no results for the search

It also becomes simple to notice if there are no people for the search in question as you just have to test whether the size of the array obtained in the filter is 0:

const pessoasFiltradas=pessoas.filter(pessoa=>pessoa.nome_com.indexOf(filtro)!=-1);

if (pessoasFiltradas.length > 0){
    console.log(pessoasFiltradas);
}
else {
    console.log("Não existem pessoas para o nome indicado");
}

Research insesitive case

Now to create a search case insensitive need to before applying the search, convert both the filter and the array data to uppercase or lowercase. In this example I will convert both to lower case based on the method toLowerCase of String.

So it will be necessary to apply toLowerCase at the filtro and to the nome_com to be tested:

const pessoas = [
    {"nome_com":"Juan Carlos Herbas Mota",
         "data_na":"21/01/1988",
         "estado_c":"Casado",
         "cargo":"Gerente",
         "Salario":"8500"
    },
    {"nome_com":"Luis Hernan Dias Pato",
         "data_na":"12/10/1960",
         "estado_c":"Solteiro",
         "cargo":"Contador",
         "Salario":"8500"
    }
];

const procura = document.getElementById("procura");

document.getElementById("procurar").addEventListener("click", function(){
  let filtro = procura.value.toLowerCase(); //aqui
  const pessoasFiltradas = pessoas.filter(
      pessoa => pessoa.nome_com.toLowerCase().indexOf(filtro) != -1);
      //-----------------------------^ e aqui
  
  if (pessoasFiltradas.length > 0){
    console.log(pessoasFiltradas);
  }
  else {
    console.log("Não existem pessoas para o nome indicado");
  } 
});

<input type="text" id="procura" placeholder="Pessoa a procurar">
<input type="button" id ="procurar" value="Procurar">