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

Navigation
1

I have a JSON file with employee data such as full name, birth date, marital status, position, salary. I need to show through a filter according to the name or surname, regardless of uppercase or lowercase:

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 eg Sr, Herbas

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

    
asked by anonymous 04.03.2018 / 01:07

2 answers

2

You can iterate the JSON by searching the results with for , converting the search string and from where it will look in lowercase to avoid 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><inputtype="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 the keys of the object ( item[dados] ). If it does not find anything, the value of resultados will be false .

    
04.03.2018 / 01:37
1

To complement the already good response from @dvd, 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 make the most of this line of code:

  • We are saying that pessoasFiltradas corresponds to the execution of method filter
  • The filter filtering based on past function
  • In the example above, filters whether pessoa.nome_com contains text in filtro
  • The indexOf returns -1 if it does not exist, that is if it does not contain the last text

Note, however, that there is no case-sensitive code so you must type Herbas to work.

See 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 makes it simple to figure out if there are no people for the given query since you only have to test if the array size obtained in 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");
}

Search case insesitive

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

So it will be necessary to apply toLowerCase to filtro and 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">
    
04.03.2018 / 16:11
Force a shortcut to open Firefox directly on a page Disable Lazy Loading for a specified query