Capture Json (Array) data and put into HTML

Question

Guys, I’m having a hard time capturing the items inside an object on Json.

Follow the code below to illustrate.

 var tipos = [
    {
        "code": "258",
        "label": "Sapatos"
    },
    {
        "code": "547",
        "label": "Kits"
    },
    {
        "code": "1213",
        "label": "Whey Protein"
    },
    {
        "code": "3110",
        "label": "Bolas"
    },
    {
        "code": "4316",
        "label": "Camisas de Time"
    },
    {
        "code": "1251",
        "label": "Cuecas"
    }];

console.log(types)

I can capture every array from the console.()

The problem is that I need to associate this in html, type , create a button (input) where the user will paste only the name of the product types and will return the code, or vice versa.

It would look something like this

The user types Balls and shall return {"code": "3110", "label": "Bolas"}, If he types Balls, Kits, shall return {"code": "3110", "label": "Bolas"}, {"code": "547","label": "Kits"}

Thank you so much for your help!

Answer 1

Look, I don’t know if I understand this correctly, if I’ve misinterpreted it, forgive me, but from the looks of it, what you’re looking for is a system like "autocomplete"?

I used the library easy-autocomplete.js. I read the documentation and adapted an example of the site itself below. See if this is what you are looking for, friend.

var options = {
	data: [{"name": "Bolas", "code": "STZ998"}, {"name": "Sapatos", "code": "CTX456"}],

getValue: "name",

	template: {
		type: "description",
		fields: {
			description: "code"
		}
	}

};

$("#provider-json").easyAutocomplete(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>

Digite "Bolas" ou "Sapatos"
<input id="provider-json" placeholder="Digite..." />

Source: http://easyautocomplete.com

Answer 2

Can use .filter() after making a .split() in what was typed, considering that the text typed can be separated by comma, as reported in the question (e.g.: Kits, Balls).

I also used a .map() to make a .trim() (eliminate spaces on the edges) and used .toLowerCase() to leave case insensitive (will find uppercase or lowercase) making the search more flexible.

var tipos = [ { "code": "258", "label": "Sapatos" }, { "code": "547", "label": "Kits" }, { "code": "1213", "label": "Whey Protein" }, { "code": "3110", "label": "Bolas" }, { "code": "4316", "label": "Camisas de Time" }, { "code": "1251", "label": "Cuecas" }];

function buscar(){
   var texto = document.body.querySelector("#texto").value;
   
   // converte em array e elimina espaços indesejados nas bordas
   // e converte para minúsculo, pare evitar o case sensitive
   var texto_array = texto.split(",").map(function(i){
      return i.trim().toLowerCase();
   });
   
   var resultado = tipos.filter(function(e){
      return ~texto_array.indexOf(e.label.toLowerCase());
   });
   
   // imprimir numa div
   var res = document.body.querySelector("#resultado");
   res.innerHTML = '';
   for(var item of resultado){
      res.innerHTML += "<strong>Código:</strong> "+item.code
      +"<br><strong>Tipo:</strong> "+item.label+"<br><br>";
   }
}

<div id="resultado">
</div>
Digite o que quer buscar:
<br>
<input type="text" id="texto" value="Kits, bolas,camisas de Time">
<br>
<input type="button" value="Buscar" onclick="buscar()">