1

Tenho essa seguinte estrutura de json:

"[{
"nome":["fulano 1","fulano 2","fulano 3","fulano 4"],
"site":["sitefulano1.html","sitefulano2.html.html","sitefulano3.html","sitefulano2.html"]}]"

Gero ele dessa forma com php e pdo mysql:

<?php
$valorV1 = count($v1);

for($col = 0; $col <= $valorV1-1; $col++) {
$autores['nome'][] = $v1[$col]['value'];
$autores['site'][] = $v2[$col]['site'];
}
  echo json_encode([$autores]);
?>

O problema que quero colocar os dados do json na tela e não consigo, alguém sabe como resolvo?

Tentei alguns exemplos não funcionaram:

function trataResposta(requisicaoAjax) {
    if(requisicaoAjax.readyState == 4) {
      if(requisicaoAjax.status == 200 || requisicaoAjax.status == 304) {    
            var dados = requisicaoAjax.responseText;
            alert(dados);

//tentei = 

var jsonObj = JSON.parse(dados);
  for (var i=0; i < jsonObj.length; i++){   
      alert(jsonObj[i]);   
  }       

    for (var i=0; i < autores.dados.length; i++) { //vai passar por todos os objetos dentro do array
     document.getElementById('insere_aqui').innerHTML = dados[i]["nome"];
     document.getElementById('insere_aqui').innerHTML = dados[i]["site"];
    }


      }
    }
}

Quando tentei dessa forma o exemplo funciona mas com o meu json que vem do banco não faz nada!

var Ex01 = {"indice":"valor","nome" : "Silas Stoffel"}

  for (var index in dados ) {   
      alert(index + ': ' + Ex01[index]);   
  }       

Outra duvida é como faço, caso queira colocar um nome no json assim? No caso livro, como faço isso com php e mysql?

{ "livro" :{
    "titulo" : "Construindo sites com CSS e (X)HTML",
    "autor" : "Maurício",
    "site" : "http://livrocss.com.br"
    }
} 

estava escrito object no console quando abri na setinha apareceu os dados la dentro

Object
nome
:
"fulano1"
site
:
"sitefulano1.html"
__proto__
:
Object
1
:
Object
nome
:
"fulano2"
site
:
"sitefulano2.html"
__proto__
:
Object
2
:
Object
nome
:
"fulano3"
site
:
"sitefulano3.html"
__proto__
:
Object
3
:
Object
nome
:
"fulano4"
site
3
  • 1
    sua segunda dúvida não funciona por que você está tentando impremir uma estrutura no alert que só aceita string simples. Se trocar a função alert por console.log acredito que funcione.
    – pmargreff
    Commented 3/04/2016 às 20:27
  • Consegui estava nao sei se nome certo é este no indice ou nivel do objeto console.log(dados[0].nome); console.log(dados[1].nome); console.log(dados[2].nome); Ae apareceram os dados
    – hyperpixel
    Commented 4/04/2016 às 19:52
  • Alguma das resposta lhe foi útil? Não esqueça de escolher uma e marcar o ✅ para que possa ser utilizada caso alguém tenha uma dúvida similar!
    – Sorack
    Commented 11/03/2019 às 19:20

3 Respostas 3

1

Da mesma forma que você faz com PHP, você faz com o javascript, prefira o console ao lugar de alert(). Se vc apertar a tecla F12 no Chrome, irá abrir o console dele, na aba "console" lá tem a saída da estrutura dos seus dados. então para ver se tem uma saída, basta fazer um console.log(dados);.

Usando uma biblioteca jQuery, você facilita o trabalho de criar uma requisição manual ajax, que exige muitos mais do que essa estrutura de métodos que você fez, na verdade uma estrutura correta de ajax seria algo similar a isso:

function CriaRequest() { 
  try { 
   var request = new XMLHttpRequest();
  } catch (IEAtual) {
    try { 
      var request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(IEAntigo) {
      try {
         var request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(falha) {
         var request = false;
      }
    }
  }
 if (!request) {
    alert("Seu Navegador não suporta Ajax!");
 } else {
   return request;
}

function getDados() {
  // Declaração de Variáveis
 var nome = document.getElementById("txtnome").value;
 var result = document.getElementById("Resultado");
 var xmlreq = CriaRequest();
 // Exibi a imagem de progresso
 result.innerHTML = '<img src="Progresso1.gif"/>';
   // Iniciar uma requisição GET ou POST
 xmlreq.open("GET", "Contato.php?txtnome=" + nome, true);
   // Atribui uma função para ser executada sempre que houver uma mudança de ado 
     xmlreq.onreadystatechange = function() {
       // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {
            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) { 
                result.innerHTML = xmlreq.responseText; 
            } else {
              result.innerHTML = "Erro: " + xmlreq.statusText; 
            } 
         }
     };
xmlreq.send(null);
}

Agora, economizaremos linhas usando jQuery:

1) Inclua a biblioteca, se quiser pode usar CDN:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

2) use o método de requisição: $.ajax(), crie um método para ler seu post:

function enviarDados(dados)
{
//a estrutura de dados enviados pode ser um json, exemplo: {"chave1":"valor1", "chave2":"valor2"};
    $.ajax({
        type: 'POST',
        url: URL,
        async: true,
        cache: false,
        dataType : "json",
        data: dados,
        success: function(jsonData)
        {
          //jsonData é o objeto de retorno do método (já em json)

           //para ler seu dados, você tanto pode converter tudo em uma string:
           document.body.innerHTML = JSON.stringify(jsonData, false,'    ');
           //como pode decidir fazer um loop no objeto:

           for (var i in jsonData) {
                for (var y in jsonData[i].nome) {
                    //saída é fulano1, fulano2 ...
                    console.log(jsonData[i].nome[y]);
                }
           }

        },
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
          alert('Erro: '+errorThrown+"\nna requisição: "+XMLHttpRequest+"\nStatus: "+textStatus);

        }
    });

$(funcion() {
  enviarDados('{chave1:valor1}');
});

Aqui tem outro exemplo, trabalhando com JSON.

2
  • 1
    O problema que é uma loja em magento e ja tem bibliotecas jquery, tenho medo de conflito por isso queria usar o js puro.
    – hyperpixel
    Commented 4/04/2016 às 19:38
  • se já tem biblioteca jquery, então não vai dar conflito. O conflito só dá com script de outra origem como por exemplo o moontools. E mesmo assim, existe o $.noConflict() para resolver isso. Eu fiz um exemplo de requisição ajax, usando JS puro também, está na resposta, é só mudar a entrada/saída de dados da maneira que você quer. Commented 4/04/2016 às 19:42
1

Vc está gerando o json de maneira errada. Tente assim:

array $autores(
    'nome' => $v1[$col]['value'],
    'site' => $v2[$col]['site']
)

echo json_encode([$autores]);

Se não der certo com '=>' tente com ':' não me lembro qual dos dois que é o correto.

Não entendi o que vc quer fazer na segunda dúvida.

4
  • A segunda duvida seguinte: { "livro" :{ "titulo" : "Construindo sites com CSS e (X)HTML", "autor" : "Maurício", "site" : "livrocss.com.br" } } o nome desse objeto json se chama livro. A duvida seria, como eu faco pra colocar um nome assim no meu com php? como monta essa estrutura? o nome poderia ser clientes, funcionarios etc
    – hyperpixel
    Commented 3/04/2016 às 21:44
  • vou tentar mexer no vetor aqui
    – hyperpixel
    Commented 3/04/2016 às 21:46
  • @AlexandreMartinsMontebelo, o que são essas chaves em $autores, sua sintaxe está incorreta. o correto seria: $autores = array(...) ou $autores = array[...] Commented 7/04/2016 às 20:27
  • verdade @IvanFerrer, corrigi na minha resposta Commented 7/04/2016 às 22:26
1

Indo pelo mais simples:

function imprimirJSON(json) {
  console.log(JSON.stringify(json));
}

E a chamada você faz por:

imprimirJSON(meuJSON);

JSON.stringify()

O método JSON.stringify() converte valores em javascript para uma String JSON. Esses valores podem ser substituídos especificando a função replacer, ou incluindo somente as propriedades específicas, quando o array do replacer for especificado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .