API usage issue

1

Hi,

I have a script used to call an external API.
The call is made and I receive the answer in console but I would like to show it if my html page.

https://curs-html-intro-marianureche.c9users.io/curs14-Ajax/index.html

For example: Above are the informations returned:

{response: {…}, current_observation: {…}}
current_observation
:
UV
:
"-1"
dewpoint_c
:
8
dewpoint_f
:
47
dewpoint_string
:
"47 F (8 C)"
display_location
:
{full: “Cluj-Napoca, Romania”, city: “Cluj-Napoca”, state: “CJ”, state_name: “Romania”, country: “RO”, …}
estimated
:
{}
feelslike_c
:
"13.2"
feelslike_f
:
"55.8"
feelslike_string
:
"55.8 F (13.2 C)"
forecast_url
:

"NA"
heat_index_f
:
"NA"
heat_index_string
:
“NA”

"mostlycloudy"
icon_url
:

local_epoch
:
"1508693134"
local_time_rfc822
:
“Sun, 22 Oct 2017 20:25:34 +0300"
local_tz_long
:
“Europe/Bucharest"
local_tz_offset
:
”+0300"
local_tz_short
:
“EEST"
nowcast
:
””

"1508692126"
observation_location
:
{full: "Strada Mircea Eliade, Cluj-Napoca, “, city: “Strada Mircea Eliade, Cluj-Napoca”, state: “”, country: “RO”, country_iso3166: “RO”, …}
observation_time
:
“Last Updated on October 22, 8:08 PM EEST"
observation_time_rfc822
:
“Sun, 22 Oct 2017 20:08:46 +0300"
precip_1hr_in
:
”-999.00"
precip_1hr_metric
:
” 0"
precip_1hr_string
:
”-999.00 in ( 0 mm)"
precip_today_in
:
"0.00"
precip_today_metric
:
"0"
precip_today_string
:
"0.00 in (0 mm)"
pressure_in
:
"29.92"
pressure_mb
:
“1013”

From those, let’s say when I hit the “Show weather” button I would like to display in HTML local_tz_offset or pressure_mb.

Any ideas or hints?

Thanks?

2

It’s impossible to know without showing the code you have at the minute, but if you’ve got a response you can use innerHTML to add the property to an HTML element you’ve selected. The response you get back is json; I don’t know whether you’ve got to the point of converting that to a JS object or not, but anyway once it is a JS object you.literally just get the properties same way you’d get any object property. Eg, asynchronous version using fetch:

async function getWeather() {
  const myResponse = await fetch('https://someApi.com', some options);
  const {local_tz_offset, pressure_mb} = await my response.json();
  document.querySelector('#myTzOffsetEl').innerHTML = local_tz_offset;
  document.querySelector('#myPressureEl').innerHTML = pressure_mb;
}
3

Hi,

Here is my code:

"
$(document).ready(onHtmlLoaded);

function onHtmlLoaded() {
var weatherUrl = “https://api.wunderground.com/api/cfbfc5f603141e07/conditions/q/Romania/Cluj-Napoca.json”;
var weatherButton = document.getElementById(“weather-button”);
weatherButton.addEventListener(“click”, function () {
$.ajax({
url: weatherUrl,
method: ‘GET’,
success: function(response) {
console.log(response);
}
});
});
}
"

Thanks for your advice. I’ll try it.

4

So in the success callback, response is your object, try using $(someElement).text(response.oneOfThePropertiesYouWant) - that’s a safer innerHTML, given an element, replace the text inside it with whatever you want to put in