Get JSON data from URL & display it using innerHTML - how?

Question

I have the following code that grabs all the data from an array and then displays it in a certain div within an HTML document. Right now the data is embedded into the code, yet I need to grab this same data from a URL. As you can see I already started the XHR request & tested it's retrieval successfully. I'm just not sure once the data is grabbed from the URL how to display it within the HTML similarly as it works now?

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com', true); xhr.send(null); // LOAD AND DISPLAY LOCATION DATA window.onload=function(){ var data = [ {"id":1271832,"segment_id":3345,"latitude":37.7029,"longitude":-121.9335,"name":"Verve","address_1":"7886 Dublin Blvd","phone_number":"555-324-5678","postal_code":"94568","postal_code_id":"7168","metro":"San Francisco-Oakland-San Jose CA","city":"Dublin","region":"CA","country":"US","m":4934,"km":4.9,"miles":3.07}, {"id":1271836,"segment_id":3345,"latitude":37.6958,"longitude":-121.9255,"name":"Verve","address_1":"1 Stoneridge Mall Space","phone_number":"555-324-5678","postal_code":"94588","postal_code_id":"7169","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasanton","region":"CA","country":"US","m":5045,"km":5,"miles":3.14}, {"id":1271831,"segment_id":3345,"latitude":37.6931,"longitude":-121.9262,"name":"Verve","address_1":"1120 Stoneridge Mall Drive","phone_number":"555-324-5678","postal_code":"94566","postal_code_id":"7167","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasanton","region":"CA","country":"US","m":5325,"km":5.3,"miles":3.31}, {"id":1271827,"segment_id":3345,"latitude":37.6999,"longitude":-121.7452,"name":"Verve","address_1":"4408 Las Positas Rd","phone_number":"555-324-5678","postal_code":"94551","postal_code_id":"7138","metro":"San Francisco-Oakland-San Jose CA","city":"Livermore","region":"CA","country":"US","m":13375,"km":13.4,"miles":8.31}, {"id":1271826,"segment_id":3345,"latitude":37.6966,"longitude":-122.0771,"name":"Verve","address_1":"3450 Village Dr","phone_number":"555-324-5678","postal_code":"94546","postal_code_id":"7133","metro":"San Francisco-Oakland-San Jose CA","city":"Castro Valley","region":"CA","country":"US","m":16796,"km":16.8,"miles":10.44}, {"id":1271838,"segment_id":3345,"latitude":37.8948,"longitude":-122.0591,"name":"Verve","address_1":"1295 S Main St","phone_number":"555-324-5678","postal_code":"94596","postal_code_id":"7292","metro":"San Francisco-Oakland-San Jose CA","city":"Walnut Creek","region":"CA","country":"US","m":23294,"km":23.3,"miles":14.48}, {"id":1271833,"segment_id":3345,"latitude":37.7114,"longitude":-122.1638,"name":"Verve","address_1":"1285 Marina Boulevard","phone_number":"555-324-5678","postal_code":"94577","postal_code_id":"7170","metro":"San Francisco-Oakland-San Jose CA","city":"San Leandro","region":"CA","country":"US","m":24055,"km":24.1,"miles":14.95}, {"id":1271819,"segment_id":3345,"latitude":37.9499,"longitude":-121.9603,"name":"Verve","address_1":"5412 Ygnacio Valley Rd","phone_number":"555-324-5678","postal_code":"94521","postal_code_id":"7254","metro":"San Francisco-Oakland-San Jose CA","city":"Concord","region":"CA","country":"US","m":24926,"km":24.9,"miles":15.49}, {"id":1271817,"segment_id":3345,"latitude":37.9435,"longitude":-121.7376,"name":"Verve","address_1":"2520 Sand Creek Rd","phone_number":"555-324-5678","postal_code":"94513","postal_code_id":"7248","metro":"San Francisco-Oakland-San Jose CA","city":"Brentwood","region":"CA","country":"US","m":27090,"km":27.1,"miles":16.84}, {"id":1271820,"segment_id":3345,"latitude":37.9452,"longitude":-122.0627,"name":"Verve","address_1":"157 Crescent Plaza","phone_number":"555-324-5678","postal_code":"94523","postal_code_id":"7256","metro":"San Francisco-Oakland-San Jose CA","city":"Pleasant Hill","region":"CA","country":"US","m":28030,"km":28,"miles":17.42} ]; data.forEach(function (item) { pios(item) }) function pios(item) { var p = document.createElement('p'); p.id = item.id; p.innerHTML = item.address_1 + '<br>' + item.city + item.region + item.postal_code; document.getElementById('locations').appendChild(p) } } 

 <div id="locations"></div> 

Answer 1

You need to add the onreadystatechange to your xhr:

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function (item) {
            pios(item);
        });
    }
}
xhr.open("GET", url, true);
xhr.send();

This includes the full methods you provided and linked it into the onload.

window.onload = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            data.forEach(function (item) {
                pios(item);
            });
        }
    }
    xhr.open('GET', 'http://example.com', true);
    xhr.send();
};

function pios(item) {
    var p = document.createElement('p');
    p.id = item.id;
    p.innerHTML = item.address_1 + '<br>' + item.city + item.region + item.postal_code;
    document.getElementById('locations').appendChild(p)
}

Answer 2

Figured this out and wanted to share. Thanks for the help!

***Don't forget to change http://example.com with the URL to your JSON data.

 function getData(callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); callback(data); } } xhr.open('GET', 'http://example.com', true); xhr.send(); } function renderData(data) { console.log(data); var html = data.pois.slice(0,3).reduce(function (frag, item) { frag.appendChild(pios(item)); return frag; }, document.createDocumentFragment()); document.getElementById('locations').appendChild(html); } function pios(item) { var p = document.createElement('pre'); p.id = item.id; p.textContent = item.address_1 + '\\n' + item.city + ' ' + item.region + ' ' + item.postal_code; return p; } getData(renderData); 

 <div id="locations"></div>