Issue loading xml-feed in p5js


#1

Hi

I am wondering how to correctly get load an xml file from an external website in p5js. In Processing it is no issue using loadXML on the url, but in p5js it seems more complicated, and just calling loadXML with the raw url does not give any results.

As an example, I am interested in getting all of the content inside the <title> tags from this site: https://ekstrabladet.dk/rssfeed/sport/

I had @GoToLoop help me out in the old Processing forum, but the solution he helped me make (and thank you a lot for that!) stopped working earlier this week for some reason… I don’t really understand how the HerokuApp and CORS proxies work, so any help would be much appreciated.

Here is the link to the original thread on the old forum:


#2

I don’t think the proxy being used on that old sketch is active anymore. :worried:

Also, that EkstraBladet.dk site seems to be now HTTPS exclusively. The old sketch uses HTTP. :roll_eyes:

Therefore we need to find another proxy & change the constant HTTP to 'https://'. :sweat_drops:

In that old forum thread I had posted a list of proxies: :postbox:

And on its comments, there are some more active CORS proxies listed. :spiral_notepad:

I’ve simply picked this 1 and it worked: :partying_face:

Basically I’ve mainly changed these lines from the old sketch and made some other cleanups too: :sunglasses:

const HTTP = 'https://',
      PROX = 'YaCDN.org/', MODE = 'proxy/',

Here’s the new link for the updated “loadXML() from EkstraBladet via Proxy” sketch: :link:

/**
 * 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 = 'EkstraBladet.dk/', FOLD = 'rssfeed/', QRY = 'sport/',
      LINK = HTTP + PROX + MODE + HTTP + SITE + FOLD + QRY,
      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('channel').getChildren('item');

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

  const ol = createElement(LIST)
            .style('color', 'blue')
            .style('font-weight: bold')
            .style('font-size: 1.2em');

  for (const title of titles)  createElement(ITEM, title).parent(ol);
}

#3

Again you are my hero!
Thank you so much :star_struck:

Do you know why loading xml needs to go through a proxy in javaScript (p5js) but not in Java (Processing)?


#4

CORS protection access got nothing to do w/ programming languages. :tongue:

CORS is a browser exclusive “feature”: :crazy_face: