Como ler uma estrutura jSON com Dom 7 (Framework 7) de forma fácil.

Oi!

Esta aula é apenas um complemento da aula Como ler uma estrutura jSON com JQuery de forma fácil., basicamente maior da parte do código é igual. Ao invés de usarmos o selet $.get do jQuery, no DOM 7 usamos request.json.

Importante! Você deve estar com o seu webService funcionando, se você ainda não criou seu webservice, ou está com dificuldades com ele, acesse a aula JSON – Criando o Web Service

Primeiramente precisamos iniciar o Dom 7 no arquivo my-app.js. Abra o arquivo my-app.js e adicione o seguinte código na primeira linha do arquivo;

var $$ = Dom7;

O mesmo exemplo mostrado na aula com jQuery, em DOM 7 ficaria assim;

app.request.json('http://appcinema.esy.es/mobile/lista_ofertas.php', function (data) {
	console.log('encontrei ' + data.length + ' registros');
	for(linha=0; linha < data.length; linha++)
	{
		console.log('');
		console.log('REGISTROS DA LINHA' + linha);
		console.log('ID da Promoção: ' + data[linha].id_promocao);
		console.log('Nome do Mercado: ' + data[linha].nome_do_mercado);
		console.log('Produto: ' + data[linha].produto);
		console.log('Valor: ' + data[linha].valor);			
	}		
});

OBS: Se estiver usando a função json_encode() do PHP para gerar a saída jSon no seu servidor, a leitura dos campos deverá ser; data[linha][X], onde X é o número do campo, por exemplo data[linha][2] // lê o valor do campo 2, que neste exemplo é o produto.

Importante 1 – Na primeira linha temos o app.request.get() sendo que o prefixo app é o nome da variável usada para iniciar o Framework 7 no arquivo my-app.js conforme visto na documentação aqui – https://framework7.io/docs/init-app.html. Se você estiver utilizando outro nome de variável que não seja app, você deverá fazer a troca.

Importante 2 – Para que o DOM 7 funcione e consequentemente o script acima também funcione é necessário iniciar o DOM 7 dentro do arquivo my-app.js. Na primeira linha do arquivo my-app.js acrescente o código var $$ = Dom7;

Tratando jSon vazios

Uma boa prática de desenvolvimento sugere evitar estruturas jSon vazios, para isso é importante criarmos uma rotina de erro em nossos arquivos PHP responsáveis por gerarem a estrutura jSON.

Urls de testes de um sistema de login;
jSon vazio: http://173.249.14.52/~aluno/3serie/00Anderson/webservice-applogin/login.php?e=x&p=x
jSon com dados: http://173.249.14.52/~aluno/3serie/00Anderson/webservice-applogin/login.php?e=a&p=a

Conforme visto nas aulas de TM, o exemplo abaixo é uma forma simples de testar o tratamento de erro;

function ValidaLogin() {

    var e = $('#e').val(); // Lê os dados de um input usuário
    var p = $('#p').val(); // Lê os dados de um input senha
    var linha = 0;     // necessário para varrer todas as linhas da saída jSon.
   
    console.log("usuário: " + e);
    console.log("senha: " + p);

    var url = 'http://173.249.14.52/~aluno/3serie/00Anderson/webservice-applogin/login.php?e=' + e + '&p=' + p;
    console.log(url);
    
    app.request.json(url, function (data) {        
        console.log('encontrei ' + data.length + ' registros');
        console.log(data);
  
        if (data[linha].erro != undefined)
            {
                alert('' + data[linha].erro);
                return;
            }
        else{
            for (linha = 0; linha < data.length; linha++) {
                alert('Seja bem vindo ' + data[linha].usuario_nome);
            }
        }        
    }) ;
}