# Show local weather help (solved)

**URL:** <https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007>\
**Category:** General\
**Tags:** json, help, weather, localweather, api\
**Created:** [June 29, 2017, 6:22pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007 "2017-06-29T18:22:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![userGitHub34535](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/usergithub34535/32/58864_2.png) [@userGitHub34535](https://forum.freecodecamp.org/u/userGitHub34535)\
**Post date:** [June 29, 2017, 6:22pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/1 "2017-06-29T18:22:07Z")

</div>

I found this api link useful: [http://ip-api.com/json,because](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](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](https://codepen.io/userGitHub34535/pen/PjEgGz) if it helps.[faulty json object](https://codepen.io/userGitHub34535/pen/PjEgGz)

Many thanks,

* * *

var myIpReq = new XMLHttpRequest();  
myIpReq.open(‘GET’, “[http://ip-api.com/json](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’];  
}

---

<div class="post-metadata">

**Author:** ![nr-mihaylov](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nr-mihaylov/32/60307_2.png) [@nr-mihaylov](https://forum.freecodecamp.org/u/nr-mihaylov)\
**Post date:** [June 29, 2017, 6:34pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/2 "2017-06-29T18:34:31Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![omer\_cohen\_npm](https://avatars.discourse-cdn.com/v4/letter/o/ed655f/32.png) [@omer\_cohen\_npm](https://forum.freecodecamp.org/u/omer_cohen_npm)\
**Post date:** [June 29, 2017, 6:36pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/3 "2017-06-29T18:36:58Z")

</div>

found the problem with the error massage 😉  
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](https://www.wunderground.com/)

---

<div class="post-metadata">

**Author:** ![userGitHub34535](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/usergithub34535/32/58864_2.png) [@userGitHub34535](https://forum.freecodecamp.org/u/userGitHub34535)\
**Post date:** [June 29, 2017, 6:40pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/4 "2017-06-29T18:40:10Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![nr-mihaylov](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nr-mihaylov/32/60307_2.png) [@nr-mihaylov](https://forum.freecodecamp.org/u/nr-mihaylov)\
**Post date:** [June 29, 2017, 6:50pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/5 "2017-06-29T18:50:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![userGitHub34535](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/usergithub34535/32/58864_2.png) [@userGitHub34535](https://forum.freecodecamp.org/u/userGitHub34535)\
**Post date:** [June 29, 2017, 7:07pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/6 "2017-06-29T19:07:10Z")

</div>

Thank you for all your helpful suggestions. I tried using [https://www.wunderground.com/](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](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?

---

<div class="post-metadata">

**Author:** ![userGitHub34535](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/usergithub34535/32/58864_2.png) [@userGitHub34535](https://forum.freecodecamp.org/u/userGitHub34535)\
**Post date:** [June 29, 2017, 7:51pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/7 "2017-06-29T19:51:00Z")

</div>

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 🙂

Many thanks!

> **Summary**
>
> Working code: var myIpReq = new XMLHttpRequest();  
> myIpReq.open(‘GET’, “[https://api.apixu.com/v1/current.json?key=6ceb688f66a14438865211006170806&q=auto:ip](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”]);  
> }

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:52pm UTC](https://forum.freecodecamp.org/t/show-local-weather-help-solved/133007/8 "2021-01-16T17:52:00Z")

</div>

Closed on January 16, 2021, 5:52pm UTC