JavaScript adding to an array and displaying it in html

Question

I'm working with a piece of code from Google, trying to alter it such that instead of windows.alerting the LT/LN coordinates, the coordinates get saved in an Array that can then be displayed in a table of some kind.

function geocodeAddress(geocoder, resultsMap) {
    var cords = []; //my array
    var address = document.getElementById('address').value;
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        window.alert("Coordinates:" + results[0].geometry.location); //current alert           
        cords.push(results[0].geometry.location); //adding to an Array            
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

I'm very rusty with JS, so i'm not even sure if it is being stored in Array. I tried a number of ways to display the Array to the screen but nothing worked, i'm not sure if that is because nothing is being stored in the array or because i'm not display the array correctly.

Explicitly put: Any ideas on how to store these coordinates in array & how should I go about display this array on screen? Cheers.

you can use console.log(cords) and open developer tools (f12) to see the output, but it looks fine. As for adding them to html there are a legend of possible solutions; here is a vanilla JS implementation : stackoverflow.com/questions/5886144/… — Pogrindis
– Pogrindis, Commented Nov 15, 2016 at 12:55

Phortuin · Accepted Answer · 2016-11-15 12:51:33Z

0

If you want to display an array in HTML:

HTML:

<div data-cords></div>

JS:

var html = '';
cords.forEach(function(cord) {
   html += cord + '<br>';
});
document.querySelector('[data-cords]').innerHTML = html;

Otherwise, you can print the array in your developer console:

console.log(cords);

Or, if you want to alert it, you can use the same construction as above:

var alertMessage = '';
cords.forEach(function(cord) {
   alertMessage += cord + '\n'; // new line character
});
alert(alertMessage);

answered Nov 15, 2016 at 12:51

Phortuin

7704 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pogrindis Over a year ago

Why have you chosen to use a custom html attribute ?

Phortuin Over a year ago

I prefer to use data attributes to hook up behaviour to HTML elements with JS instead of id's or class names. Scales better, single responsibility (no CSS/JS interference). Also, it's a regular div element with a data attribute, which has been standard stuff in browsers for ages

WitVault · Accepted Answer · 2016-11-15 13:51:40Z

I hope this will help you.

var cords = [];
function searchAddress() {
  var addressInput = document.getElementById('address-input').value;
  document.getElementById('address-input').value = "";

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({address: addressInput}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      var myResult = results[0].geometry.location; // reference LatLng value
      
      cords.push(myResult);
      
        document.getElementById('add-loc').appendChild(generateList(cords));
      
    } else { 
    // warning message
    alert("The Geocode was not successful for the following reason: " + status);

  }
 });

}

function generateList(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  
<body>
    <div>
       Enter address <input type="text" id="address-input">
       <button onclick="searchAddress();">Search</button>
    </div>   
    <div id="add-loc"></div>
  </body>

Collectives™ on Stack Overflow

JavaScript adding to an array and displaying it in html

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related