Retrieve data from database throught javascript & jquery

[jean_5]

I have the following code:

//list is the result of the query of the database
var list =[];

var _this = this, $div = _this.$div, opts = _this.settings, $table = $div.find(opts.tableSelector);

var fieldsToShow = ["Right Identification", "Left Identification", "Total", 
    "RIGHT IDENTIFICATION RELAPSE", "LEFT IDENTIFICATION RELAPSE", "Total", 
    "IDENTIFICATION TOTAL IN "];

var i = 0;

$table.html('<table>')

for (var j = 0; j < list.length; j++) {
    i = 0;
    for (p in list[j]) {
        if (p === "Name") {
            $table.html('<tr>');
            $table.html('<td>' + list[j][p] + '</td><td></td>');
            $table.html('</tr>');
        } else {
            if(p === "GrandTotal" && list[j].Nome === "CountryTown"){
                $table.html('<tr>');
                $table.html('<td>' + fieldsToShow[i] + 'COUNTRY TOWN</td><td>' + list[j][p] + '</td>');
                $table.html('</tr>');
            } else {
                if(p === "GrandTotal" && list[j].Nome === "Metropolitan"){
                    $table.html('<tr>');
                    $table.html('<td>' + fieldsToShow[i] + 'METROPOLITAN</td><td>' + list[j][p] + '</td>');
                    $table.html('</tr>');
                    } else {
                        $table.html('<tr>');
                        $table.html('<td>' + fieldsToShow[i] + '</td><td>' + list[j][p] + '</td>');
                        $table.html('</tr>');
                        i++;
                    }
                }                       
            }
        }
    }

    $table.html('<tr><td>GRAND TOTAL:</td><td>' + (parseInt(list[0].GrandTotal) + parseInt(list[1].GrandTotal)) + '</td></tr>');

    $table.html('</table>')

And the following html:

<div class="form-list-result QueryResults hidden">
            <div class="form-list-result-header QueryResults hidden">
                <label>Query Results</label>
            </div>
            <table class="table" width="100%">
            </table>
        </div>

But when I click on the button, the table continues empty, only with <table></table>

When I used the document.write, it used to appear the table, like this:

Contry Town 
Right Identification                            2
Left Identification                             3
Total                                           5
Right Identification Relapse                    1
Left Identification Relapse                     1
Total                                           2
TOTAL IDENTIFICATIN IN COUNTRY TOWN             7
Metropolitan    
Right Identification                            3
Left Identification                             2
Total   5
Right Identification Relapse                    1
Left Identification Relapse                     1
Total                                           2
TOTAL IDENTIFICATIN IN METROPOLITAN             7
TOTAL:                                          14

And the result of the query in database is this:

Name            IdDireta    IdIndireta  SubTotal    RIdDireta   RIdIndireta RSubTotal   GrandTotal
Interior        2           3           5           1           1           2           7
Metropolitana   3           2           5           1           1           2           7

[pritaeas]

And the result of the query in database is this

This is directly on the database? You need a script language in between to query the database and pass the results to javascript.

[jean_5]

I already have the script language. The result of the query is inside the array list, for example

list = [
    [
       Nome: Interior;
       IdDireta: 2;
       IdIndireta: 3;
       SubTotal: 5;
       RIdDireta: 1;
       RIdIndireta: 1;
       RSubTotal: 1;
       GrandTotal: 7
    ]

    [
       Nome: Metropolitana;
       IdDireta: 3;
       IdIndireta: 2;
       SubTotal: 5;
       RIdDireta: 1;
       RIdIndireta: 1;
       RSubTotal: 1;
       GrandTotal: 7
    ]
];

For the result of the query on database in the question, for example

[Traevel]

[
Nome: Interior;
IdDireta: 2;

Nome and not name?

if (p === "Name") {

var _this = this, $div = _this.$div, opts = _this.settings, $table = $div.find(opts.tableSelector);

What is this? your $table is this.$div.find(this.settings.tableSelector) and $div = this.$div?

It only has a class <table class="table". Try an id or something simpler to check, this construct is overly complicated for debugging.

[jean_5]

Is name in the array above. this is the entire document this.$div.find(this.settings.tableSelector) is to find the table in the page $div = this.$div is to find a div in the page

[Traevel]

Ah ok, I just noticed you use $table.html('<table>'), $table.html('<tr>'); and so on. You're overriding its contents? From the API:

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content

Considering $table.html('</table>') is the last one, that would be what's printed. Assuming $table is indeed correctly referring to <table class="table" width="100%">. That's what I meant with perhaps give it an id. It only has a class, so even if you do find it, any other table with that class would also be selected.

[jean_5]

Was that what I needed:

for (var j = 0; j < list.length; j++) {
                    i = 0;
                    for (p in list[j]) {
                        if (p === "Nome") {
                            $("table").append('<tr><td>' + list[j][p] + '</td><td></td></tr>');
                        } else {
                            if (p === "TotalGeral" && list[j].Nome === "Interior") {
                                $("table").append('<tr><td>' + listaCamposAExibir[i] + 'O INTERIOR</td><td>' + list[j][p] + '</td></tr>');
                            } else {
                                if (p === "TotalGeral" && list[j].Nome === "Metropolitana") {
                                    $("table").append('<tr><td>' + listaCamposAExibir[i] + 'A CAPITAL</td><td>' + list[j][p] + '</td></tr>');
                                } else {
                                    $("table").append('<tr><td>' + listaCamposAExibir[i] + '</td><td>' + list[j][p] + '</td></tr>');
                                    i++;
                                }
                            }
                        }
                    }
                }


               $("table").append('<tr><td>TOTAL:</td><td>' + (parseInt(list[0].TotalGeral) + parseInt(list[1].TotalGeral)) + '</td></tr>');