1

quando eu digito o comando console.log(response) ele exibe todas as informações no console do navegador, mas por algum detalhe, não estou conseguindo exibir os dados dentro da minha div que está no trecho do html lá embaixo. Alguém pode me apontar o que estou deixando passar?

<script>
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
      }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    myFunction(url);
    function myFunction(response) {
        var arr = JSON.parse(JSON.stringify(response));
        var i;
        var out = "<div>";

        for(i = 0; i < arr.length; i++) {
            out += "<a href='#' class='samba-playlist-trigger list-group-item active' data-mediaid=" + arr[i].id + "></a>";
        }
        out += "</div>";
        document.getElementById("id01").innerHTML = out;
    }
</script>

A parte de exibição na página html

<div class="container">
    <div class="row">
        <div id="id01"></div>
    </div>
</div>
1
  • Qual a ideia de myFunction(url);? e onde estás a instanciar o ajax? Outra coisa, o JSON.stringify não faz sentido pois estás a receber uma string.
    – Sergio
    17/02/2017 às 20:07

1 Resposta 1

2

Três coisas que me ocorrem:

  • Qual a ideia de myFunction(url);? essa linha não faz sentido pois myFunction é o que queres usar para processar o resultado do ajax certo?
  • falta o código que instancia o ajax
  • o JSON.stringify não faz sentido pois estás a receber uma string.

Sugestão:

function chamarAjax(url, callback) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      callback(request.responseText);
    } else {
      console.log('Houve um erro!');
    }
  };

  request.onerror = function() {
    console.log('Houve um erro!');
  };

  request.send();
}

function myFunction(response) {
  var arr = JSON.parse(response);
  var ancoras = arr.map(function(obj) {
    return "<a href='#' class='samba-playlist-trigger list-group-item active' data-mediaid='" + obj.id + "'>Link</a>";
  }).join('');
  document.getElementById("id01").innerHTML = ["<div>", ancoras, "</div>"].join('');
}

chamarAjax('http://sergiofrilans.se/so_pt_stuff/184974.php', myFunction);
a {
  display: block;
}
<div id="id01"></div>

Dessa maneira tens o ajax dentro de uma função e a tua função para processar o ajax a ser passada como callback, ficando tudo mais organizado.

15
  • Bem que achei que estava meio estranho o meu código, sou novo no assunto json. Sergio, poderias me esclarecer o porque do ajax? Obrigado. 17/02/2017 às 20:22
  • @VandréPaulo no teu código tens xmlhttp, é o mesmo que eu tenho, só que dei-lhe o nome request. O que te falta é var request = new XMLHttpRequest();, que se quiseres usar o teu nome de variável seria var xmlhttp = new XMLHttpRequest();. Isso é o que se chama de ajax, ou seja XMLHttpRequest é o mesmo que pedido ajax.
    – Sergio
    17/02/2017 às 20:25
  • Valeu pela explicação, @Sergio. Vou fazer os ajustes e coloco o resultado aqui. Forte abraço! 17/02/2017 às 20:36
  • @VandréPaulo de nada. Se ainda houver duvidas diz. Se a resposta solucionar o teu problema (ou resolver a maior parte) não precisas de colocar o resultado aqui. Podes clicar para aceitar a resposta. Faz como achares melhor :)
    – Sergio
    17/02/2017 às 20:38
  • ele ainda não está a exibir no navegador. No console ele mostra o Array com os objetos perfeitamente. Só não consigo exibir no meu site, dentro da minha div, é como se ele carregasse a parte do código <a href='#' class='samba-playlist-trigger list-group-item active' data-mediaid=" + obj.id + "></a> vazio. 18/02/2017 às 18:07

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 .