Javascript and SQL - Fill a ticket with one line data after selecting it

You can do the second way: get the id of this query and pass it as a parameter of your function viewBoleto ();

onclick="verBoleto("+ data[i]['id'] +");"

In your "viewBalloon ()" function, you make a query by the ID and return your ticket mounted only with this ID information.

I discovered the solution. In the onclick of the Preview button:

onclick='verBoleto("+ data[i]['nossonumero'] +","+ data[i]['valor'] +","+ data[i]['dataemissao'] +","+ data[i]['datavencimento'] +","+ data[i]['razaosocial'] +");'

And in the function itself, within js:

$('#dataDoc1').val(dataemissao);
$('#vencDoc1').val(datavencimento);
$('#sacado1').val(razaosocial);
$('#nossoNum1').val(nossonumero);
$('#valDoc1').val(valor);

For now, I can fill in OurNumber. For Valor I fill in, but do not take the number with a right comma (170.90 is only 170). Dates it turns into a number. And Social Reason does not even work.

I will suggest some changes, the first is to move the code snippet that mounts the line to another function, we will do this to create a closure, this way it will be easier to pass the data to the function verBoleto.

The second point has no relation to the problem, but it is a good practice, avoid making a selection of DOM objects unnecessarily, do them only once in the script.

Finally, do not declare your events inline in your HTML, use an EventListener.

var bodyBoletosLista = $("#bodyBoletosLista");
var lblSemRegistros = $("#lblSemRegistros");
var divBoletosLista = $('#divBoletosLista');
var divTelaBoleto = $("#divTelaBoleto");
var comboUnidades = $("#comboUnidades");
var txtData1 = $("#txtData1");
var txtData2 = $("#txtData2");

function verBoleto(event, data) {
    console.log(data.razaosocial);
    console.log(data.nossonumero);
    console.log(data.status);
    console.log(data.valor);
    console.log(data.dataemissao);
    console.log(datavencimento);
}

function montarLinha(data) {
    var html = "";
    html += "<tr>";
    html += "<td style='text-align:left; width:300px'>" + data.razaosocial + "</td>";
    html += "<td style='width: 100px'>" + data.nossonumero  + "</td>";
    html += "<td style='width: 80px'>" + data.status  + "</td>";
    html += "<td style='width: 80px'>" + data.valor  + "</td>";
    html += "<td style='width: 100px'>" + data.dataemissao  + "</td>";
    html += "<td style='width: 100px'>" + data.datavencimento +"</td>";
    html += "<td><input class='botaoCad' type='button' value='Visualizar' style='float:none'></td>";
    html += "</tr>";

    var linha = $(html);
    var botaoCad = $(".botaoCad", linha);   
    botaoCad.on("click", function (event) {
        verBoleto(event, data);
    })

    bodyBoletosLista.append(linha);
}

function buscaBoletos(){
    $.ajax({
        async: false, cache: false,
        url: '[:raiz]emissaoBoletos/getBoletos',
        data: ({
            unidade: comboUnidades.val(),
            de: txtData1.val(),
            ate: txtData2.val()
        }),
        dataType: 'json',
        success: function(data) {
            divBoletosLista.hide(); 

            bodyBoletosLista.html("");              
            if (data.length > 0){
                for(var i = 0;i< data.length;i++){
                    montarLinha(data[i]);
                }
            } else {
                var semRegistros = $("<tr><td colspan='7' align='center'>" + lblSemRegistros.val() + "</td></tr>");
                bodyBoletosLista.append(semRegistros);
            }

            divBoletosLista.show();
            divTelaBoleto.hide();
        }
    });
}

Optionally, you can use a replacement function to assemble your HTML.

HTML

<template id="tmplBoleto">
    <tr>
        <td style='text-align:left; width:300px'>{razaosocial}</td>
        <td style='width: 100px'>{nossonumero}</td>
        <td style='width: 80px'>{status}</td>
        <td style='width: 80px'>{valor}</td>
        <td style='width: 100px'>{dataemissao}</td>
        <td style='width: 100px'>{datavencimento}</td>
        <td><input class='botaoCad' type='button' value='Visualizar' style='float:none'></td>
    </tr>"
</template>

JavaScript

var tmpl = document.getElementById("tmplBoleto").innerHTML;
var html = tmpl.replace(/{(\w+)}/g, function(str, prop){
    return data[prop];
});