Capture Json (Array) data and put it in HTML

Question

Capture Json (Array) data and put it in HTML

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Well, I'm having a hard time capturing the items inside an Json object.

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 by giving console.log ()

TheproblemisthatIneedtoassociatethisinhtml,type,createabutton(input)wheretheuserwillpasteonlythenameoftheproducttypesandwillreturnthecode,orviceversa.

Itwouldbemoreorlesslikethis

TheusertypesBallsandshouldreturn{"code": "3110", "label": "Bolas"} If he types Balls, Kits , he should return {"code": "3110", "label": "Bolas"}, {"code": "547","label": "Kits"}

Thanks for the help!

javascript

asked by anonymous 06.05.2018 / 07:22

2 answers

0

Look, I do not know if I understood correctly, if I interpreted it wrong, forgive me, but apparently, what you are looking for is an autocomplete type system?

I used the easy-autocomplete.js library. I have read the documentation and adapted one of the example from the website below. See if this is what you're looking for, my 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><scriptsrc="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: link

06.05.2018 / 08:24

Multiplication Algorithm by sum to any integer Is SQL Express free?

score 1 · Accepted Answer

You can use .filter() after making a .split() in what you typed, whereas the typed text can be separated by commas, as informed in the question (eg, Kits, Balls).

I've also used .map() to make a .trim() (delete spaces in the borders) and I used .toLowerCase() to leave case insensitive (will be case sensitive) 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()">