Show local weather help (solved)

1

I found this api link useful: http://ip-api.com/json,because it returns the lat and longitude in a JSON.
This teacher has written a very helpful example of how to use an XMLHttpRequest https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON.

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 https://codepen.io/userGitHub34535/pen/PjEgGz if it helps.faulty json object

Many thanks,

var myIpReq = new XMLHttpRequest();
myIpReq.open(‘GET’, “http://ip-api.com/json”);
myIpReq.responseType = ‘json’;
myIpReq.send();
myIpReq.onLoad = function() {
var myIp = myIpReq.response;
myAlert(myIp);
myCreate(myIp);
}

function myAlert(myJson) {
alert(myJson[“lat”]);
}

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

2

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

Mixed Content: The page at 'https://codepen.io/userGitHub34535/pen/PjEgGz' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. 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:

3

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
4

Thank you, so firstly, I’m guessing that this means I can’t use http://ip-api.com/json 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. https://stackoverflow.com/questions/14727710/xmlhttprequest-onload-not-called

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

5

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

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <title>The HTML5 Template</title>
</head>
<body>
</body>
   <script>
   </script>
</html>

and open it in your browser.

6

Thank you for all your helpful suggestions. I tried using https://www.wunderground.com/, 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. https://api.apixu.com/v1/current.json?key=6ceb688f66a14438865211006170806&q=auto:ip

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?

7

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!

Summary

Working code: var myIpReq = new XMLHttpRequest();
myIpReq.open(‘GET’, “https://api.apixu.com/v1/current.json?key=6ceb688f66a14438865211006170806&q=auto:ip”);
myIpReq.responseType = ‘json’;
myIpReq.send();
myIpReq.onreadystatechange = function() { //onreadystatechange or onload
var myIp = myIpReq.response;
myAlert(myIp);
}

function myAlert(myJson) {
alert(myJson[“location”][“lat”]);
}