I am unable to display the array data

Question

when I type the console.log(Response) command it displays all the information in the browser console, but for some detail, I’m not able to display the data inside my div which is in the html snippet below. Can someone point out to me what I’m missing?

<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>

The display part in the html page

<div class="container">
    <div class="row">
        <div id="id01"></div>
    </div>
</div>

Answer 1

Three things come to mind:

• What’s the idea of myFunction(url);? that line makes no sense because myFunction is what you want to use to process the right ajax result?
• missing the code that calls ajax
• the JSON.stringify doesn’t make sense because you’re getting a string.

Suggestion:

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>

That way you have ajax inside a function and your function to process ajax to be passed as callback, getting everything more organized.