Popular inputs with Json file in jQuery

Question

Popular inputs with Json file in jQuery

Navigation

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

1

I would like to know how to fill some inputs through data from a json file with jQuery.

Follow the data in Json:

{"data":[
{"id":"0","lNeg":"","cnpjToma":"02.558.157/1001-62","nDoc":"00121961","nPed":"5100484612","dtEmis":"01/11/2016","dtVenc":"01/01/2017","munic":"SÃO PAULO","codNat":"17.06","opts":"","tipoDoc":"","vIcms":"","vDoc":"","irrf":"","inss":"","iss":"","pis":"","cofins":"","cssl":"","Obs":""},
{"id":"1","lNeg":"","cnpjToma":"20.558.756/1232-01","nDoc":"23463546","nPed":"1234979878","dtEmis":"23/01/2016","dtVenc":"25/10/2017","munic":"CAMPINAS","codNat":"12.01","opts":"","tipoDoc":"","vIcms":"","vDoc":"","irrf":"","inss":"","iss":"","pis":"","cofins":"","cssl":"","Obs":""},
{"id":"2","lNeg":"","cnpjToma":"09.333.000/1000-89","nDoc":"98984776","nPed":"7896563535","dtEmis":"09/05/2016","dtVenc":"19/12/2017","munic":"INDAIATUBA","codNat":"14.56","opts":"","tipoDoc":"","vIcms":"","vDoc":"","irrf":"","inss":"","iss":"","pis":"","cofins":"","cssl":"","Obs":""},
{"id":"3","lNeg":"","cnpjToma":"43.115.201/1203-79","nDoc":"24984333","nPed":"4676563531","dtEmis":"08/03/2016","dtVenc":"10/05/2017","munic":"SALTO","codNat":"01.99","opts":"","tipoDoc":"","vIcms":"","vDoc":"","irrf":"","inss":"","iss":"","pis":"","cofins":"","cssl":"","Obs":""},
{"id":"4","lNeg":"","cnpjToma":"11.551.151/1011-62","nDoc":"10121962","nPed":"9900484743","dtEmis":"11/11/2016","dtVenc":"02/03/2017","munic":"ITU","codNat":"13.06","opts":"","tipoDoc":"","vIcms":"","vDoc":"","irrf":"","inss":"","iss":"","pis":"","cofins":"","cssl":"","Obs":""}          
]}

Follow the inputs in html:

<div class="col-md-2">
    <label for="cnpjToma">CNPJ tomador:</label>
    <input type="text" class="form-control" id="cnpjToma" name="cnpjToma">
</div>
<div class="col-md-2">
    <label for="nDoc">N° do docum:</label>
    <input type="text" class="form-control" id="nDoc">
</div>
<div class="col-md-2">
    <label for="nPed" class="text-danger">N° do pedido:</label>
    <input type="text" class="form-control" id="nPed">
</div>
<div class="col-md-2">
    <label for="dtEmis">Data de emissão:</label>
    <input type="text" class="form-control" id="dtEmis">
</div>
<div class="col-md-2">
    <label for="dtVenc">Data de vencim:</label>
    <input type="text" class="form-control" id="dtVenc">
</div>

Follow jQuery:

$(document).ready(function(){

var dados;
    $.ajax({
        url: "detalhes.json",
        success: function(data){
            dados = data;
        }
    });

var populateInputs = function(data){
    for (var prop in data){
        var val = data[prop];
            $("#" + prop).val(val);
    };
};
    populateInputs(dados[0]);
  })

jquery json

asked by anonymous 08.09.2017 / 17:17

2 answers

0

In your case, get the object by id and use its attributes to put in the inputs as follows:

$("#cnpjToma").val(objeto[0].cnpjToma)

In pure js:

document.getElementById("cnpjToma").value = objeto[0].cnpjToma

But this will make your code a bit static, if you want to make dynamic or use all the objects in the array you will have to create a logic to traverse it and use its attributes.

But that's basically it, the rest is logical of you!

Hugs!

08.09.2017 / 17:57

Solr generating exception "maxClauseCount is set to 1024" Seg Fault using strcat and strcpy

score 1 · Accepted Answer

First, make a request to the json file:

$.ajax({
    url: "nomeDoArquivo.json",
    success: function(data){

    }
});

Save the data somewhere else:

var dados;
$.ajax({
    url: "nomeDoArquivo.json",
    success: function(data){
        dados = data;
    }
});

Next, create a function to move the fields in data and popular form fields:

var populateInputs = function(data){
    for (var prop in data){
        var val = data[prop];
        $("#"+prop).val(val);
    };
};

So, just use:

populateInputs(dados[0]);

An important tip: Your original file is poorly formatted. For example,% w / o% is not closing the quotation marks in id. Another problem is that it opens a new {"id:"0" object without a comma before. This will give parse error.

Change to:

{"data":[
    {"id":"0", "lNeg":"",...}