Displaying my local weather

Hello,

I’ve been working on the Show the Local Weather project. I found a great many resources and finally decided that less was more so I settled on the code you can see here at the CodePen link: https://codepen.io/luciano991/project/editor/AYeyWQ/

I’m feeling like I’m pretty close and there don’t seem to be any errors in my code. But I’m missing a connection somewhere. I would appreciate a push in the right direction. A hint. Anything.

Thanks

Hi, Luciano!

In this case it is necessary to use JSONP, because they are different domains.
Including in your url this ?callback=?, Will transform the function $.getJSON into a JSONP request.

See how:

$.getJSON('https://api.darksky.net/forecast/e30ca0131518f727066440d0ae44ebcd/43.3302, 73.0169?callback=?', function(forecast) {
    console.log(forecast);
});

codepan.

More on this subject here.

Many thanks for this reply. Sorry I didn’t see it sooner. I’ll have to check more often. I didn’t get an email so I thought that no one had responded.

So now I am assuming I have gotten the weather information for this exercise. What now stumps me is how to get the data into the HTML. Should I use push or something like document.getElementByClassName('temperature".html ?

I’m not sure how to make this connection. Hope you can point me in the right directions.

Thanks again,

Luciano

Sorry, one more thing. I have made some changes to my HTML and CSS at https://codepen.io/luciano991/project/editor/AYeyWQ/

Thanks,

Luciano

Hi Luciano!

When you receive the response from a request, to assign the values to the html, you can use jquery functions. Let’s see an example.

Let’s say that your response has this structure:

{
  temperature: 70,
  situation: 'Sunny',
  location: 'New York City, NY'
}

This is your HTML:

<...>
  <section>
    <h2 id="location"></h2>
    <h1 id="temperature"></h1>
    <p id="situation"></p>
  </section>
<...>

In this case, let’s assign the values this way:

$.getJSON(someUrl, function(res) {
  $('#temperature').text(res.temperature);
  $('#situation').text(res.situation);
  $('#location').text(res.location);
});

There are many ways to assign information to HTML, if you are interested, have many articles and discussion about that.

I hope I have helped! :slight_smile:

Yes you most certainly have. I would like the references to which you refer.

I have simplified my script. It now consists of just this code:

$.getJSON(‘https://api.darksky.net/forecast/e30ca0131518f727066440d0ae44ebcd/43.354834, -73.047550?callback=?’, function(forecast) {
$(’.temperature’).text(res.temperature);
});

The relevant HTML:

Today's Weather in Danby, VT

Today's Weather - Danby, VT

°
F
weather icon

So should that alone place the temperature in the proper place in the HTML? Or am I missing more pieces.

Also did you mean to type $,getJSON or $.getJSON

Thanks,

Luciano

Wow, You’re right, it’s $.getJSON, sorry! :blush:

So, if your function callback parameter has that struct, then works! Anyway, put a console.log(forecast) to see the struct of parameter.

Sorry my poor english, I’m not fluent.

Please don’t apologize. What is your native language? I bet I’m not very fluent in that.

I followed your suggestion but still no results. This is the link to my project: https://codepen.io/luciano991/project/editor/AYeyWQ/
Perhaps you could have a look.

Thanks,

Mark

#Hi Mark

I’m Braziliam!

Look at this line of your code:
<script>https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js</script>.
It’s wrong, the correct syntax is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>.

Next!

Remove this line of your code: $('.temperature').text(res.temperature);, this will cause an error because res.temperature is just an example!

And…

Run your code and look at the developer console (F12), you will see the structure of the API response, which in this case is the forecast parameter.

Hello Dev,
Therefore I assume Portuguese is your native language. It’s a beautiful language. I speak a bit of Spanish.

Anyway, thanks for your corrections. Once I put those in and ran the script in the console I see it’s darksky.net that is not allowing a connection for some reason. API’s can be a real pain, but I hope to get the hang of them one day.

So now I am going back to try OpenWeatherMap API which seems to be a bit more friendly. If you have any links to send me for taking the data the API returns and putting it my HTML I would love to have them. I will also Google some questions as well.

I have learned that this process of learning can be long but I enjoy it. Thanks for pointing me in the right direction. When I get it working I’ll give you a shout.

All the best,

Mark

I used Google Translate and got this. I hope it’s close:
Olá Dev,
Por isso, suponho que o português é a sua língua nativa. É uma linda linguagem. Eu falo um pouco de espanhol.

De qualquer forma, obrigado pelas suas correções. Uma vez que eu coloquei aqueles e executei o script no console, vejo que é darksky.net que não está permitindo uma conexão por algum motivo. O API pode ser uma verdadeira dor, mas espero pegar um jeito neles.

Então, agora vou voltar a tentar o OpenWeatherMap API, que parece ser um pouco mais amigável. Se você tem algum link para me enviar para tirar os dados, a API retorna e colocando o meu HTML, eu adoraria tê-los. Eu também vou fazer algumas perguntas no Google.

Aprendi que esse processo de aprendizagem pode ser longo, mas eu gosto disso. Obrigado por me apontar na direção certa. Quando eu funcionar, vou te dar um grito.

muito bem sucedida.

Marca

2 Likes

Hi Mark, how are you?

Some times the API's requires callback functions to JSONP, by many motives, Access-Control-Allow-Origin and etc…!

Look my Weather Local App, i’m use the weatherrunlocked, it’s good and free. In project you can see the way that i use to assign response information of API in HTML elements too.

I’m able to help you with anything in your project. Just ask me if you have any question!

The learn process to program is sometimes too hard, but if you have persistence you get it! In the end, all you learned will be worth it!

Good job,

Lucas

1 Like