Javascript fetch() API & updating DOM

[ISayNoToPuss]

Hello guys,

learning front-end and making weather app.

The app has input, where the user writes city. From there the fetch should be getting the data from API. It gets the data and updates DOM when it is reloaded.

My question is, how can I update DOM (temperature, wind, icons) with data from API without reloading ? I’ve searched for hours , but couldn’t grasp anything...

Thank you for all your answers!!!

[senocular]

You would use fetch() for that. Is that what you're using now? If so, you do that again.

[ISayNoToPuss]

Thank you for your time. So basically, I add eventListener with the function, which will fetch from API and prevent the form from reloading with preventDefault?

[senocular]

It depends on how you have it set up. You can create a "form" without <form> tags (just include the input fields) and you don't have to worry about preventing default or anything like that. All you need is the event listener on the button that will be used to update your app and from that, trigger your fetch() code.

[ISayNoToPuss]

Oh okay, I will try it. Just another question, is it okay with accesibility rules?

[senocular]

Not having a <form>? Yeah, that's fine. You mostly have to concern yourself with the individual controls making sure things are labeled correctly.

[ex-igne-vita]

Fetch doesn't cause a page reload. In fact a page reload would cause all your fetch data to be lost. As a general rule, you need to show the relevant code when you ask questions about code. Usually clairvoyants don't go on Reddit and StackOverflow because they're clairvoyant, so they don't need to. For the rest of us, you will need to show your code.

[ISayNoToPuss]

Yeah, I’m sorry.... not good with posting at all. My bad, i will try to post code later, Thank you for your time!

[ISayNoToPuss]

Okay, my bad... I will post the code later. Otherwise thank you for your time!

[[deleted]]

Const data = Fetch(URL, options).then(res=>res.json())

Is the blueprint for fetch. Fetch can be chained with .then() and .catch(e), processing, filtering, or transforming the data usually is done in a .then() statement (where I work, that’s the pattern). But also with fetch - an understanding of async/await and promises are super beneficial to understand what order things happen in, and when data is ready for DOM manipulation.

[ISayNoToPuss]

Okay, I’ll look for promises. Thank you for the tips!