Jump to content
Philippe Luis

Página dinâmica com JSON

Recommended Posts

Galera eu tenho seguinte código:

function construcao(){
    var section = document.getElementById('section');
    var qtn = loj.paoDeMel[0].pao.length;
    for (var i = 0; i < qtn; i++){
        section.innerHTML +='<div id="produto"><header><h1 id="titulo-prod">'+loj.paoDeMel[0].pao[i].nome+'.&nbsp;&nbsp;&nbsp;</h1></header><img id="img" src="../img/'+loj.paoDeMel[0].pao[i].foto+'"><h2 id="preco">Preço: '+loj.paoDeMel[0].pao[i].precokg+'</h2><select class="qtnProd" id="qtnProd"></select><button onclick="addCart()" class="bt-menu"><span class="glyphicon glyphicon-shopping-cart ico-bt"></span> Adicionar ao carrinho</button></div>';
        
        for(var c = 0; c < 3; c++){
            var op = document.getElementById('qtnProd');
            
             op.innerHTML +='<option value="0">'+loj.paoDeMel[0].pao[i].optNome[c].opt+'</option>';
            
        }
        
         
    } 
    
}

Basicamente estou incluindo a minha section com id section uma <div> e tudo mais.

E estou alimentando as informações dessa minha <div> com JSON, até ae tudo certo.

Estou fazendo um for(), para reproduzir a mesma quantidade de informações que meu JSON.

TUDO CERTO, A DIV E REPETIDA COM AS INFORMAÇÕES.

O Problema é que tenho um <SELECT> dentro da div que preciso alimentar as informações dele com o JSON, repare que são somente 3 informações que ele recebe, tentei dar um for() para colocar as informações mais não da certo, e depois preciso pegar o valor do value desse <SELECT> em uma função externa(que já está pronta); 

Share this post


Link to post
Share on other sites
var loj = {
    'paoDeMel':[
            {
        'pao':[
            {
            'id': 1,
            'nome':'Pão Francês',
            'optNome': [{'opt':"5 Pães 50g R$:3,00"},{'opt':"7 Pães 70g R$:3,50"},{'opt':"10 Pães 90g R$:4,00"}],
            'precokg': "R$: 12,50/Kg",
            'preco': [{'preco' :3.00},{'preco' :3.50},{'preco' :4.00}],
            'quant': [{'uni':"5 Uni"},{'uni':"7 Uni"},{'uni':"10 Uni"}],
            'foto' : "padaria_paes.jpg",
            'logo' : "icon-pao-frances.jpg"
            },{
            'id': 2,
            'nome':'Pão De Batata',
            'optNome': [{'opt':"5 Pães 50g R$:3,50"},{'opt':"7 Pães 70g R$:4,00"},{'opt':"10 Pães 90g R$:4,50"}],
            'precokg': "R$: 12,50/Kg",
            'preco': [{'preco' :3.00},{'preco' :3.50},{'preco' :4.00}],
            'quant': [{'uni':"5 Uni"},{'uni':"7 Uni"},{'uni':"10 Uni"}],
            'foto' : "pao-de-batata-fofinho.jpg",
            'logo' : "icon-pao-frances.jpg"
            }
            ]
        }       
        ]
};

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Filhote de Dev
      Estou fazendo um requisição HTTP e de retorno recebo um Json! Então eu quero pegar esse valor de Json e atribuir a outra variável para poder modificá-la e depois exibir as duas lado a lado para comparar. Então me deparei com 2 problemas o primeiro é que não estou conseguindo atribuir o valor httpRequest.responseText a uma variável, já tentei a função eval() e a toString() e quando eu peço para printar com um alert() para verificar me retorna undefined o segundo problema é que eu estava exibindo o resultado na dom por meio de appendChild(), estou exibindo apenas com os valores originais para teste, mas quando ele executa esse trexo do code, ele printa na dom e logo em seguida retira da dom, tipo uma piscadinha rápida. Ficaria grato se me ajudassem a resolver esse problema.
       
      o Json que ele recebe de uma pagina .html é esse:
      {"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""}  
      o Script esta assim:
      var httpRequest function request(){ var url = 'test.html'//apagar depois if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest() } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP") } catch (e) {} } } if (!httpRequest) { alert('Giving up :( Cannot create an XMLHTTP instance') return false } httpRequest.onreadystatechange = alertContents httpRequest.open('GET', url, true) httpRequest.responseType = 'jason' httpRequest.send() httpRequest.onload = function(){ view(httpRequest) } } function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText) } else { alert('There was a problem with the request.') } } } function view(httpRequest){ var resposta = httpRequest.responseText.toString() alert(resposta.value) var box = document.querySelector('div#decoding') box.setAttribute('class', 'shadow') var challenge = document.createElement('fieldset') challenge.setAttribute('class', 'painting') var legendChallenge = document.createElement('legend') legendChallenge.innerHTML = 'Challenge' challenge.innerHTML = `Número de casas: ${httpRequest.response.numero_casa}<br> Token: ${httpRequest.response.token}<br> Cifrado: ${httpRequest.response.cifrado}<br> Decifrado: ${httpRequest.response.decifrado}<br> Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` var answer = document.createElement('fieldset') answer.setAttribute('class', 'painting') var legendAnswer = document.createElement('legend') legendAnswer.innerHTML = 'Answer' answer.innerHTML = `Número de casas: ${httpRequest.response.numero_casas}<br> Token: ${httpRequest.response.token}<br> Cifrado: ${httpRequest.response.cifrado}<br> Decifrado: ${httpRequest.response.decifrado}<br> Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` box.appendChild(challenge) box.appendChild(answer) challenge.appendChild(legendChallenge) answer.appendChild(legendAnswer) }  
       
      Index.html:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Caesar cipher</title> </head> <body> <header> <h1>Caesar cipher</h1> </header> <section> <div class="container"> <div class="box"> <div class="form"> <form action=""> <div> <fieldset class="shadow"> <legend><h1>Decoding</h1></legend> <button id="btntoken" onclick="request()">Fetch Encryption Challenge</button> </fieldset> </div> <div id="decoding" class="aling"></div> </form> </div> </div> </div> </section> <footer> </footer> <script type="text/javascript" src="script.js"></script> </body> </html>  
       
      e o style.css para dar sentido as class:
      /*zerando margein e padding de todos os elementos*/ *{ margin: 0; padding: 0; } /*definido estilo padrão*/ body{ font-family: 'Courier New', Courier, monospace; font-size: 16px; background-color: #F5F6FA; } /*Estilização e alinhamento do cabeçario*/ header{ background-color: #22212F; color: #FFF; height: 80px; font-size: 24px; align-items: center; display: flex; padding-left: 15px; } /*Alinhamento das tags presentes na section*/ section,div.form{ display: flex; justify-content: center; } div.container{ margin:5px; width: 800px; background-color: #FFF; padding: 15px; margin-top: 20px; } div.parag,div.box{ display: block; } div.form{ margin-top:30px; } p{ margin-top: 10px; } /*estilização do formulario principal*/ .shadow{ box-shadow: 5px 5px 5px 2px #22212F; } fieldset{ width: 500px; min-height:150px; padding: 10px; } legend{ font-size: 20px; } input#token{ font-size: 16px; width: 350px; height: 30px; } button#btntoken{ margin: 5px; margin-top:15px; width:480px; height: 50px; font-size: 24px; } /*estilização da resposta ao usuário*/ .aling{ margin: 20px; } .painting{ display: inline-block; width: 230px; min-height: 100px; }
    • By asacap1000
      Galera estou com um problema, não sei como montar a estrura para receber os dados vindo deste script e salvar no banco de dados.
      Se alguem puder me dar uma força, pelo menos como montar essa estrutura já vai ajudar muito.
       
      Segue script de envio.
      <?php $charSet = "UTF-8"; $mediaType = "application/json"; //header("Content-Type: ".$mediaType); //Configuracoes do sistema $url_integra_aurora = 'http://webservice.test/verify.php';////INFORMAR O LINK QUE SERÁ SOLICITADO NO ENVIO DOS DADOS //receber neste campo todos os dados via POST////// /////ABAIXO INSERIR OS DADOS DO POST EM UMA ARRAY///// $contatos = array( 'nome'=>urlencode("Ricardo"), 'idade'=>urlencode("4321"), 'email'=>urlencode("ricardo@mane.com"), 'telefone'=>urlencode("666-999") ); /////APÓS RECEBER LANÇAR OS DADOS EM UMA ARRAY ABAIXO SERÁ CODFICADO PARA JSON $data_post = json_encode($contatos); $url = $url_integra_aurora.""; $Datasecurity = date('Ymd'); ///ASSIM SEERÁ GERADA UMA CHAVE POR DIA $SecurityId = $Datasecurity.':'.'CNPJ'; ////ADICIONA A DATA UMA IDENTIFICAÇÃO DA EMRPESA NESTE CASO CNPJ $SecurityKey = "d1ZLpLQRGyb-h6ZEqnbhlS23WjBWl_hUGpB615sKGfw"; ////CHAVE DE SEGURANÇA SECUNDÁRIA FIXA $headers = array(); $headers[] = "Accept: ".$mediaType; $headers[] = "Accept-Charset: ".$charSet; $headers[] = "Accept-Encoding: ".$mediaType; $headers[] = "Content-Type: ".$mediaType.";charset=".$charSet; $AuthorizationHeader = $SecurityId.":".$SecurityKey; //// CHAVE DE SEGURANÇA GERADA DIARIAMENTE JUNTO COM CHAVE DE SEGURANÇA FIXA $AuthorizationHeaderBase64 = base64_encode($AuthorizationHeader); // APÓS JUNTAR AS CHAVES ELAS SÃO CODIFICADAS EM HASH BASE64 E ENVIADAS PARA O SERVIDOR VALIDAR $headers[] = "Authorization: Basic ".$AuthorizationHeaderBase64; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $data_post); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($ch); $result2 = json_decode($result,true); var_dump($result2); curl_close($ch); ?>  
    • By Pedro Batista Lopes
      Alguém poderia me ajudar faço uma busca no meu banco de dados, e faço um json_encode para mandar para o front.
      Mais as palavras que tem caracteres especiais Ç e acentos retornam null, não posso mudar a formatação do banco de dados.
      Segue o código.
      <?php require_once "../includes/php/conectar_bd.php"; require_once "../validar_sessao.php"; header('Content-type: text/html; charset=UTF-8') ; if ($conn->connect_errno) { echo "Falha ao conectar: " . $db->connect_errno; } //if ($_REQUEST['usr_logado'] == "") return; $mes_inicio = 1;//$_REQUEST['mes_inicio']; $mes_fim =2;// $_REQUEST['mes_fim']; $ano = 2019;// $_REQUEST['ano']; $cod_nat_oper = '1,40,42,99,18,292,51,302,303';$_REQUEST['nat_operacao']; if (is_array($cod_nat_oper)) $cod_nat_oper = implode(",",$cod_nat_oper); //if (is_array($cod_nat_oper)) $cod_nat_oper = implode(",",$cod_nat_oper); $Result_atendente = "SELECT a.empresa ,a.cliente ,b.nom_cliente ,e.cod_uni_feder ,d.cod_repres ,f.den_tip_cli"; $meses_total = null; for($mes = $mes_inicio; $mes <= $mes_fim; $mes++) { $Result_atendente .= ",SUM(CASE WHEN MONTH(dat_hor_emissao) = $mes THEN 1 ELSE 0 END) AS Qtd_mes$mes"; $meses_total[] = $mes; } $meses_total = implode($meses_total, ','); $Result_atendente .= ",SUM(CASE WHEN MONTH(dat_hor_emissao) IN($meses_total) THEN 1 ELSE 0 END) AS total"; $Result_atendente .= " FROM fat_nf_mestre a join clientes b on (b.cod_cliente = a.cliente) join fat_nf_item c on (c.empresa = a.empresa and c.trans_nota_fiscal = a.trans_nota_fiscal) join pedidos d on (d.cod_empresa = c.empresa and d.num_pedido = c.pedido) join cidades e on (e.cod_cidade = b.cod_cidade) join tipo_cliente f on (f.cod_tip_cli = b.cod_tip_cli) WHERE a.empresa IN (10,30,50,51) and YEAR(dat_hor_emissao) = $ano and d.Cod_tip_carteira = '1' and c.seq_item_nf = '1' and a.sit_nota_fiscal <> 'C' and a.natureza_operacao in (1,40,42,99,18,292,51,302,303) GROUP BY 1,2,3,4,5,6 HAVING SUM(CASE WHEN MONTH(dat_hor_emissao) IN($meses_total) THEN 1 ELSE 0 END) > 0"; $resultado_atendente = $db->prepare($Result_atendente); $resultado_atendente->execute(); $dado['rows'] = array(); while ($row_atendente = $resultado_atendente->fetch(PDO::FETCH_OBJ)) {array_push($dado['rows'], $row_atendente);} //echo "<pre>"; //echo $dado['nom_cliente']; //echo "</pre>"; echo json_encode($dado,JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?> e sai assim.
      { empresa: "10", cliente: "025368835000120", nom_cliente: null,****************************Campo com carecteres especiais cod_uni_feder: "MT", cod_repres: "533", den_tip_cli: "REVENDEDOR ", qtd_mes1: "1", qtd_mes2: "0", total: "1" },  
    • By brunoogm
      Pessoal, vou iniciar um desenvolvimento mobile usando Xamarin
      e gostaria de saber se alguém conhece alguma maneira
      ou tenha algum doc. de como utilizar PHP e MySql (e se necessário Json)
      para realizar um CRUD e a partir daí eu poder me entender com a plataforma...
       
      Desde já obrigado.
       
       
    • By Gilberto Jr
      Boa tarde.
       
      Eu esto com um probleminha que eu não estou conseguindo resolver.
       
      Estou lendo um json atraves de uma webservice https://jsonplaceholder.typicode.com/photos atraves do codigo abaixo.
       
      <html> <head> <title>Teste</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <!-- Adicionando Javascript --> <script type="text/javascript" > $(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", dataType: "json", url: "https://jsonplaceholder.typicode.com/photos", success: function(data) { for (var i in data) { //vai passar por todos os objetos dentro do array $("#title").text(data[i]["title"]); $("#id").text(data[i]["id"]); $("#albumId").text(data[i]["albumId"]); $("#thumbnailUrl").attr("src",data[i]["thumbnailUrl"]); $("#url").attr("src",data[i]["url"]); } } }); }) }); // END Function, END ready </script> </head> <body> <input type="button" placeholder="Busca" id="search" value="Buscar"> <section> <div class="container"> <div class="row" id="content"> <br/> <div id="id"></div><br/> <div id="albumId"></div><br/> <div id="title"></div><br/> <img src="" id="thumbnailUrl"><br/> <img src="" id="url"><br/> </div> </div> </section> </body> </html> Eu estou até conseguindo trazer as informações. Porem vem o ultimo dado do JSON, 
       
      E eu também, tenho que mostrar todas as informações do arquivo JSON. Fazer um for para mostrar todos os dados na tela.
       
      Mas eu não estou conseguindo, poderia me ajudar?
       
      Att;
      Gilberto Jr
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.