Error on loadXML(URL) within P5js

var url ='https://www.aviationweather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&minLat=25&minLon=-125&maxLat=50&maxLon=-66&hoursBeforeNow=1&stationstring=K*&fields=station_id,latitude,longitude,flight_category';

var airportData;

var xml;

function preload() {
 xml = loadXML(url, gotData);  //if I comment out this line it runs without error
  
}

function setup() {
  createCanvas(1280,564);  //equidistant
  
  }

function gotData(xml){
  airportData=xml.getChildren('METAR');
}

Get the following error,

Uncaught TypeError: Cannot read property ‘split’ of undefined (: line 56)

loadXML is part of the core library of P5.js is it not?


Yes but read this link.
Edit : Hehe, Answered at the same time as post above.

1 Like

Yes, I saw that link before and tried copying and pasting (substituting my url for his being careful to remove the https:// as that appears to be concatenated onto the string passed in the loadXML command.), and still did not work. Still get the error on line 56.

I used the same proxy as he. Any benefit going to a different proxy. Its just an ASCII response, don’t understand why a proxy is necessary and not documented within the p5.js reference material. Did have to make changes tot he index.html file?

/**
 * loadXML() from EkstraBladet via Proxy (v2.0)
 * Andreas_Ref & GoToLoop (2019-Feb-08)
 *
 * https://Discourse.Processing.org/t/issue-loading-xml-feed-in-p5js/8212/2
 *
 * https://Bl.ocks.org/GoSubRoutine/5bdec67b4f70080bfddb6c0607cb6c70
 *
 * https://EkstraBladet.dk/rssfeed/sport/
 * https://Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
*/

"use strict";

const HTTP = 'https://',
      PROX = 'YaCDN.org/', MODE = 'proxy/',
      SITE = 'www.aviationweather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&minLat=25&minLon=-125&maxLat=50&maxLon=-66&hoursBeforeNow=1&stationstring=K*&fields=station_id,latitude,longitude,flight_category', FOLD = 'rssfeed/', QRY = 'sport/',
      LINK = HTTP + PROX + MODE + HTTP + SITE,
      FILE = 'sport.xml',
      REMOTE = true,
      TAG = 'title',
      LIST = 'ol', ITEM = 'li',
      titles = [];

let xml;

function preload() {
  console.info(LINK);
  xml = loadXML(REMOTE && LINK || FILE, print, console.warn);
}

function setup() {
  noCanvas(), noLoop();

  const items = xml.getChild('data').getChildren('METAR');

  for (const item of items) {
    print(item.listChildren());
    //titles.push(item.getChild(TAG).getContent());
  }

  
}

Same error

I did some experiments and I’ve found this proxy link works:
https://YaCDN.org/proxy/https://www.AviationWeather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationstring=KSE*&hoursBeforeNow=1&minLat=25&minLon=-125&maxLat=50&maxLon=-66&fields=station_id,latitude,longitude,flight_category

But if we shorten KSE* to KS* it stops working:
https://YaCDN.org/proxy/https://www.AviationWeather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationstring=KS*&hoursBeforeNow=1&minLat=25&minLon=-125&maxLat=50&maxLon=-66&fields=station_id,latitude,longitude,flight_category

Much probably b/c the request above bacame too big now for the proxy server.

However w/ this other proxy server it doesn’t care much about the request’s size; even K* is OK:
https://CORS-Anywhere.HerokuApp.com/https://www.AviationWeather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationstring=K*&hoursBeforeNow=1&minLat=25&minLon=-125&maxLat=50&maxLon=-66&fields=station_id,latitude,longitude,flight_category

P.S.: The URL above w/ this particular proxy only works when programmatically requested.

It won’t work by clicking or pasting it in a browser!

I tried proxy and it worked for a while then it stopped working. Are they limited use proxies or something. I don’t understand still why we have to use a proxy. I can enter the url straight in a browser and it returns data.

Proxies aren’t meant for constant usage AFAIK.

The link still works on the proxy’s demo site though:
https://www.AviationWeather.gov/adds/dataserver_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&stationstring=K*&hoursBeforeNow=1&minLat=25&minLon=-125&maxLat=50&maxLon=-66&fields=station_id,latitude,longitude,flight_category

B/c the site AviationWeather.gov doesn’t enable CORS for its API service:


CORS is exclusive to browsers. A non-browser server can grab resources regardless of CORS.