How to add an array element to html with jQuery

Question

I made an array with two elements using the browser's built in navigator. gpsLocation[0] is my latitude, and gpsLocation1 is my longitude. Immediately before my jQuery code, using log to check my gpsLocation, I confirm that both values exist. Yet, when I assign the first element of my array to the html of a paragraph element, it says undefined. I even checked the coords it gave me and they're shockingly accurate. I've searched for an answer and there's a million similarly phrased questions but none of them seem to be trying to do this.

Here is my code:

function getLocation() {
  var gpsLocation = [];
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      gpsLocation.push(position.coords.latitude);
      gpsLocation.push(position.coords.longitude);
    });
  }
  return gpsLocation;
}

function getWeather() {   
  var gpsLocation = getLocation();
  console.log(gpsLocation);//Looks good in the console.
  $(function(){
    $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
  <button id="test-button" onclick="getWeather()">Test Button</button>
  <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>

The second function name might seem random but weather is ultimately going to be its purpose. Still struggling to understand jQuery and json.

My console

I am unable to see any output of `console.log(gpsLocation);` . When i am running your code. show us what output you get from it. — Alive to die - Anant, Sep 12 '17 at 10:14
`getCurrentPosition()` is asynchronous, Possible dupe of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Satpal, Sep 12 '17 at 10:17
I added a picture of what I see in my console. Blacked out of course, wouldn't want one of you fellas showing up at my house to give a private lecture. — Kyle Freeman, Sep 12 '17 at 10:22
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — CBroe, Sep 12 '17 at 10:28
So I read the answer in that link. I don't claim to understand any of it, but based off his phone call analogy, I'd imagine if that was going on here, the console.log wouldn't know what was in gpsLocation either, right? — Kyle Freeman, Sep 12 '17 at 10:41
I commented out all of my code and tried using code directly from W3Schools. It also did not work. I'm convinced that my issue is not with the code, but something to do with Codepen. But I can't seem to find others with the issue and there are codepen apps with geolocation features. I tried changing the html in the callback function of the navigator request directly with the positions instead of storing them in an array. It did not work either and I think that rules out the asynchronous call stuff. This thread should probably be deleted but it threatened to ban me from asking questions. — Kyle Freeman, Sep 13 '17 at 07:18

score 0 · Answer 1 · answered Sep 12 '17 at 10:33

function getLocation() {
    var gpsLocation = [];
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                latitude: "a",
                longitude: "v"
            };
            gpsLocation.push(pos);
        });
    }
    return gpsLocation;
}

function getWeather() {
    var gpsLocation = getLocation();
    console.log(gpsLocation); //Looks good in the console.
    $(function() {
        $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
    <button id="test-button" onclick="getWeather()">Test Button</button>
    <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>

I don't understand. This has the exact same result only now you don't appear to be getting the latitude or longitude at all? — Kyle Freeman, Sep 12 '17 at 10:43

score 0 · Answer 2 · answered Sep 12 '17 at 10:47

you arent executing the navigator.geolocation.getCurrentPosition(function(position) function, which means that var gpsLocation stays an empty array. Run my edit and see the log 'now in here' never fires. Look into that issue first.

function getLocation() {
    var gpsLocation = [];
    if (navigator.geolocation) {
console.log('in here');
        navigator.geolocation.getCurrentPosition(function(position) {
console.log('now in here');
            var pos = [{
                latitude: "a",
                longitude: "v"
            }];
            gpsLocation.push(pos);
            console.log('do i get this far?');
        });
    }
    return gpsLocation;
}

function getWeather() {
    var gpsLocation = getLocation();
    console.log(gpsLocation); //Looks good in the console.
    $(function() {
        $('#test-paragraph').html('Latitude: ' + gpsLocation[0]);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weather">
    <button id="test-button" onclick="getWeather()">Test Button</button>
    <p id="test-paragraph">This is a sample paragraph for learning jQuery</p>
</div>

I can't think of any reason why they wouldn't fire, but I'm new to web development. I hate it, jej, but I have C# experience. And besides that, my console has my gps coordinates. I don't know how they would be there if everything in getLocation wasn't working. Is it possible that Codepen is messing up my code? That's the website I'm using to write this app. — Kyle Freeman, Sep 12 '17 at 10:52

How to add an array element to html with jQuery

2 Answers2