0

I'm new to Javascript, but we all was at sometime. I'm Stuck!

I can get my XMLHTTPRequest response ok from a gov site in xml format (no JSON available). I can't get it to console log or display to my html page. I can only see it in the firefox>developertools>network>response

What am I doing wrong? I want to see it in my console log and get it to my html page.

MY RESPONSE - IN FIREFOX: >developerTools>network>response

   <?xml version="1.0" encoding="UTF-8"?>
<response xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.2" xsi:noNamespaceSchemaLocation="http://www.aviationweather.gov/static/adds/schema/metar1_2.xsd">
  <request_index>174466304</request_index>
  <data_source name="metars" />
  <request type="retrieve" />
  <errors />
  <warnings />
  <time_taken_ms>14</time_taken_ms>
  <data num_results="6">
    <METAR>
      <raw_text>KCRX 161655Z AUTO 29010KT 9SM BKN012 OVC017 03/00 A3000 RMK AO2</raw_text>
      <station_id>KCRX</station_id>
      <observation_time>2020-12-16T16:55:00Z</observation_time>
      <latitude>34.92</latitude>
      <longitude>-88.6</longitude>
      <temp_c>3.0</temp_c>
      <dewpoint_c>0.0</dewpoint_c>
      <wind_dir_degrees>290</wind_dir_degrees>
      <wind_speed_kt>10</wind_speed_kt>
      <visibility_statute_mi>9.0</visibility_statute_mi>
      <altim_in_hg>30.0</altim_in_hg>
      <quality_control_flags>
        <auto>TRUE</auto>
        <auto_station>TRUE</auto_station>
      </quality_control_flags>
      <sky_condition sky_cover="BKN" cloud_base_ft_agl="1200" />
      <sky_condition sky_cover="OVC" cloud_base_ft_agl="1700" />
      <flight_category>MVFR</flight_category>
      <metar_type>METAR</metar_type>
      <elevation_m>128.0</elevation_m>
    </METAR>
   </data>
   </response>

MY XMLHTTPRequest:

const request = new XMLHttpRequest();
request.open('GET', 'https://www.aviationweather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationString=KCRX&hoursBeforeNow=2',);

request.onload = function() {
  console.log(request);
};
request.send();

My Console shows:

enter image description here

MY Header: enter image description here

W.Young
  • 11
  • 3
  • Ryan - thanks. I've tried that many times and just tried it again after your response. I still get the same - nothing in the console. – W.Young Dec 16 '20 at 17:55
  • Looks like it's not set up for `CORS`, at least I was unable to get the `xmlhttprequest` to work. I kept getting an `undefined` message in the `onerror` callback of the `xmlhttprequest`, I've read that there are API's available for this site but you may need to pay. Not sure. Do some research and see what you can find. – Ryan Wilson Dec 16 '20 at 19:12
  • I can get the XML response as I shown above. I'm thinking if I get a CORS error, you my not get the onload. I don't know. I hope someone can see the problem. – W.Young Dec 16 '20 at 20:56
  • `onload` is not firing at all when i tested, add the `onerror` callback and you'll see that it fires. I was able to get the XML when i plugged in the url directly into my browser, but not using `xmlhttprequest`. – Ryan Wilson Dec 16 '20 at 21:54
  • I get "empty string" using the `onerror`. I don't understand why I can't get the response that's showing in my developers tools? Thanks Ryan – W.Young Dec 17 '20 at 12:33
  • That's what I mean. There is an error and the status code I received was `0`. From doing a little research it looks like this could be a `CORS` error. – Ryan Wilson Dec 17 '20 at 13:18
  • Please see (https://stackoverflow.com/questions/872206/what-does-it-mean-when-an-http-request-returns-status-code-0#:~:text=An%20HTTP%20response%20code%20of,execute%20within%20a%20specified%20time.) – Ryan Wilson Dec 17 '20 at 13:48
  • Thanks Ryan - I got it to finnally log by [link]https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 – W.Young Dec 17 '20 at 14:11
  • My new code: `const getWeather = async () => { let response = await fetch('https://cors-anywhere.herokuapp.com/https://www.aviationweather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationString=KCRX&hoursBeforeNow=2'); if(response.status !== 200){ throw new Error('cannot fetch the data'); } let data = await response.text(); return data; }; getWeather() .then(data => console.log('resolved:', data)) .catch(err => console.log('rejected:', err.message));` – W.Young Dec 17 '20 at 14:12
  • Good Job! You can always answer your own question by putting it as an answer below and reference the link which gave you your answer. I would like to point out that the solution may fail - `Note: If https://cors-anywhere.herokuapp.com is down or unavailable when you try it, see below for how to deploy your own CORS Anywhere server at Heroku in just 2-3 minutes.` – Ryan Wilson Dec 17 '20 at 14:36
  • Yeah, I still don't know why I get the CORS error. I got a good clue. I deployed it to my hostgator server and still got the same error. I do need some help posting correctly. – W.Young Dec 17 '20 at 14:43
  • Ryan - you did get me on the right track, by suggesting the `onerror`. That triggered me to look more into the CORS error. I need now to break down what I console.log and just get the info I want. – W.Young Dec 17 '20 at 19:22

0 Answers0