Show local weather help (solved)

I found this api link useful:,because it returns the lat and longitude in a JSON.
This teacher has written a very helpful example of how to use an XMLHttpRequest

Now, I put those things together and thought I’d be able to have a JavaScript alert saying what the latitude is, and then create a HTML heading with the region name, but for some reason it is not working…?

Here’s my if it helps.faulty json object

Many thanks,

var myIpReq = new XMLHttpRequest();‘GET’, “”);
myIpReq.responseType = ‘json’;
myIpReq.onLoad = function() {
var myIp = myIpReq.response;

function myAlert(myJson) {

function myCreate(myJson) {
var myH1 = document.createElement(‘h1’);
myH1.textContent = myJson[‘region’];

If you open the browser’s dev tool console you should see the problem:

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.

On a side note its refreshing to see someone create a XMLHttpRequest from scratch instead of using a jQuery shortcuts. :slight_smile:

found the problem with the error massage :wink:
codePen allow us to create http request only if has http"S" .
i try to add your project s to url request and give me another error.
i read the documentation look like , they do not support http"s"
use another service has many one of them is wunderground

1 Like

Thank you, so firstly, I’m guessing that this means I can’t use with codepen.

And secondly, I changed “myIpReq.onLoad” to “myIpReq.onload” which still didn’t work, and then to “myIpReq.onreadystatechange”, which gave me ‘undefined’ as an alert.

Thank you for your help! I’ll keep working on it…

You can always just make a html file on your PC with a template like this:

<!doctype html>

    <meta charset="utf-8">
    <title>The HTML5 Template</title>

and open it in your browser.

Thank you for all your helpful suggestions. I tried using, but wasn’t sure how to get a json object back. So I used this one instead, and it is interesting because it should give a JSON object back, with another nested object inside.

The only problem is, codepen says “Uncaught TypeError: Cannot read property ‘lat’ of undefined
at XMLHttpRequest.myIpReq.onload ()” I’m not sure why it has not appeared to receive the JSON object?

Wow! Thank you both so much. Your responses kept me motivated, and yes, using (a) https (JSON object) solved it. Now I’m getting a JavaScrip alert saying ‘latitude 51.3’ like I wanted :slight_smile:

Many thanks!


Working code: var myIpReq = new XMLHttpRequest();‘GET’, “”);
myIpReq.responseType = ‘json’;
myIpReq.onreadystatechange = function() { //onreadystatechange or onload
var myIp = myIpReq.response;

function myAlert(myJson) {