for (var i = 0; i <= data.length; i++) { não funciona mais?

[maurov]

Esta tradicional linha em javascript não funciona mais!?

Dá um erro de

Código Selecionar Expandir

cannot read property length of null

Tentei colocar ao redor disto um

Código Selecionar Expandir

if (data != null) {

mas não adiantou.

Alguém consegue dar um help?

[zekkerj]

Essa variável "data" foi corretamente inicializada?

[maurov]

Postei todo o script para ilustrar o exemplo. É uma script para imprimir grafico de chart.js buscando os dados no mysql. O erro citado é na parte do Ajax. Este exemplo está no canal do Guilherme Chinaglia no youtube, e funciona lá.

Código Selecionar Expandir


$('document').ready(function () {

    $.ajax({
        type: "POST",
        url: "chart.php",
        dataType: "json",
        success: function (data) {
           
            var nomearray = [];
            var valorarray = [];

            if (data !== null) {
           
                for (var i = 0; i <= data.length; i++) {

                    nomearray.push(data[i].nome);
                    valorarray.push(data[i].valor);
                }

            }

            grafico(nomearray, valorarray);
           
        }
    });

})

function grafico (nome, valor) {

    // A estrutura abaixo já vem pré-pronta da biblioteca. Ajustar fatores
    var ctx = document.getElementById('chart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
       
            //
            labels: nome,
       
            // No site do chart.js tem varias opcoes de configuracao
            datasets: [{
                label: 'qde ',
                data: valor,
           
                // The rgba() are an extension of RGB color values with an alpha channel which specifies the opacity of the color
                backgroundColor: [
    'rgba(153, 102, 255, 0.3)',
    'yellow'
                ],
                borderColor: [
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

}


[maurov]

Na tela do navegador, nada aparece. No console do navegador, aparece o seguinte erro:

Código Selecionar Expandir

Uncaught TypeError: Cannot read property 'length' of null
    at Object.acquireContext (Chart.min.js:7)
    at Qe.construct (Chart.min.js:7)
    at new Qe (Chart.min.js:7)
    at grafico (app.js:45)
    at Object.success (app.js:33)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

Na mensagem de erro, onde diz chart.min.js:7 , faz um link para:
https://cdnjs.cloudfare.com/ajax/libs/chart.js/2.9.3/chart.min.js7

[zekkerj]

Nunca fui muito versado em JS. Mas essa comparação "!==", como aparece no script, está correta?

Experimente também inverter o código, em vez de testar se data não é "null", teste se é, e caso seja, dê algum aviso. Tipo assim:

Código Selecionar Expandir

...
if( data == null ) {
    alert( "data é null!!!" );
}
else {
...


[maurov]

Vou testar. Uso ==  ou === ?

[zekkerj]

Use "==". A menos que vc tenha alguma documentação autorizando a forma com três sinais de igual...

[maurov]

Não deu.
Vou testar outras versões de min.js e posto aqui

[maurov]

No teste sugerido;
Abriu aquela janela da alert com a mensagem 'data é null' e o botão se OK para voltar à janela inicial.

Então, voltando ao php que acessa o DB:

Código Selecionar Expandir

$pdo = new PDO('mysql:host=localhost;dbname=mydb;port=3306;charset=utf8','myusername','mypassword');

    $query = "SELECT tb_testepai.nome, tb_testefilha.valor FROM tb_testepai LEFT JOIN tb_testefilha ON tb_testepai.id = tb_testefilha.id_pai";
    $statement = $pdo->prepare(sql);
    $statement->execute();
    while($results=$statement->fetch(PDO::FETCH_ASSOC) ) {
        $result[]=$results;
    }
    echo json_encode($result);

[maurov]

o SELECT foi criado, testado e executado dentro do phpmyadmin. Então está ok

[zekkerj]

Não encontrei nada que ajude na sua dúvida original, mas pelo menos achei uma boa explicação da diferença entre "==" e "===" (e também, logicamente, entre "!=" e "!==").
http://www.macoratti.net/18/09/js_dif1.htm

De volta ao seu problema, uma possibilidade é que o tipo/valor armazenado em "data" seja alguma coisa que não possui a propriedade "length".

Outra coisa a confirmar, é se o código sendo executado é o seu, ou o que está no site da CloudFlare. Vc confirmar isso na chamada de carga do script JS, na página HTML fonte.

[maurov]

vou tentar usar while com mysqli e criar 2 dados json ao invés de um array, já que assim não consegui.
Posto aqui o que der.
Valeu a parceria!

[maurov]

O erro não era ali, mas ainda não achei a resposta. Porque o arranjo fico como NULL?
Script:

Código Selecionar Expandir

$query="SELECT a.nome, b.valor FROM tb_testepai a LEFT JOIN tb_testefilha b ON a.id = b.id_pai";
$result=mysqli_query($dbc,$query) or die ('Erro' . mysqli_error($dbc));
while ($row = mysqli_fetch_array($result)) {
        $nome = $row['nome'];
        $valor = $row['valor'];
        echo 'Resposta do echo $nome dentro do while: '.$nome;
        echo '<br >';
        echo 'Resposta do echo $valor dentro do while: '.$valor;
        echo '<br />';
}

    echo 'Resposta do echo json result: '.json_encode($result);

Resultado de tela:

Código Selecionar Expandir

Resposta do echo $nome dentro do while: joao
Resposta do echo $valor dentro do while: 30
Resposta do echo $nome dentro do while: joao
Resposta do echo $valor dentro do while: 15
Resposta do echo $nome dentro do while: maria
Resposta do echo $valor dentro do while: 20
Resposta do echo json result: {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}

[zekkerj]

Hmmmmm... veja só... vc primeiro está iterando sobre o resultado da consulta, depois vc chama json_encode() sobre a consulta...

Mas, imagine que a cada vez que vc chame mysqli_fetch_array() pra ver a próxima linha da consulta, o resultado seja alterado, para remover a linha atual? Quando vc sai da iteração, pode ser que o resultado da consulta realmente não tenha mais nada, e assim, quando você tenta lê-la, os resultados serão nulos...

Talvez vc tenha que, de alguma forma, "resetar" a consulta, depois de iterar sobre ela. Ou chamar json_encode() antes de iterar com mysqli_fetch_array().
Outra alternativa seria buscar na documentação alguma forma de consultar/iterar sobre o resultado da consulta, de forma não destrutiva.

[maurov]

Primeiramente imaginei que fosse a forma de pesquisa que estava errada, então refiz pelo mysqli, que uso e sei que funciona, e o resultado no json encode ficou null.
No meu entendimento, acho que o $result feito pelo mysqli_fetch_array tem todos dados. A varaiavel de loop $row apenas vai extraindo um a um. Então, seria necessário o jason_encode na variável $result mesmo. Mas porque ela traz resultados NULL?
Criei um ambiente semelhante ao do tutorial do guilherme chinaglia, mas não consigo extrair os dados.