Issue loading xml-feed in p5js

Andreas_Ref

Hey

I am having issues loading simple xml-feeds in p5.js. It seems like the feed never loads?

The link for the (example) xml feed is ekstrabladet.dk/rss2/?mode=normal&submode=sport. I am using the p5.js editor.

var xml;

function preload() {
  var url = 'http://ekstrabladet.dk/rss2/?mode=normal&submode=sport';
  xml = loadXML(url);
}

function setup() {
  print(xml);
}

GoToLoop

https://forum.Processing.org/two/discussion/20149/unable-to-load-xml-file#Item_8

http://p5js.SketchPad.cc/sp/pad/view/ro.CJr$SpnCkgIPQC/latest

/**
 * loadXML from EkstraBladet (v1.0)
 * Andreas_Ref & GoToLoop (2017-May-19)
 *
 * forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_1
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.CJr$SpnCkgIPQC/latest
 *
 * EkstraBladet.dk/rss2/?mode=normal&submode=sport
*/

"use strict";

const HTTP = 'http:' + '//',
      PROX = 'CORS-Anywhere.HerokuApp.com/',
      SITE = 'EkstraBladet.dk/',
      PATH = 'rss2/',
      FILE = 'sports.xml',
      QRY1 = '?mode=' + 'normal',
      QRY2 = '&submode=' + 'sport',
      URI  = HTTP + PROX + HTTP + SITE + PATH + QRY1 + QRY2,
      REMOTE = true;

let xml;

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

function setup() {
  for (const item of xml.getChild('channel').getChildren('item'))  print(item);
}

Andreas_Ref

Super cool, thanks a lot!

Andreas_Ref

Quick follow up question: How would I save all the titles in an array? (I am not used to working with xml nor the const item of syntax).

GoToLoop

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://p5js.org/reference/#/p5.XML

http://p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC/latest

/**
 * loadXML from EkstraBladet (v1.2)
 * Andreas_Ref & GoToLoop (2017-May-19)
 *
 * forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_4
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC/latest
 *
 * EkstraBladet.dk/rss2/?mode=normal&submode=sport
*/

"use strict";

const HTTP = 'http:' + '//',
      PROX = 'CORS-Anywhere.HerokuApp.com/',
      SITE = 'EkstraBladet.dk/',
      PATH = 'rss2/',
      FILE = 'rss.xml',
      QRY1 = '?mode=' + 'normal',
      QRY2 = '&submode=' + 'sport',
      URI  = HTTP + PROX + HTTP + SITE + PATH + QRY1 + QRY2,
      REMOTE = true,
      titles = [];

let xml;

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

function setup() {
  noCanvas();

  for (const item of xml.getChild('channel').getChildren('item'))
    titles.push(item.getChild('title').getContent());

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

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

Andreas_Ref

I get 23391: Uncaught TypeError: undefined is not a function for the lines containing for (const item of xml.getChild('channel').getChildren('item'))

Any hint why? Still using the p5.js editor btw.

GoToLoop

Which p5.js editor? AFAIK, that was abandoned a long time ago already! :-&

If you really need an offline editor for p5.js, my advice is to grab p5.js mode for Processing's IDE (PDE):
https://Processing.org/download/

• After installing p5.js mode for the PDE, paste my code at its 1st tab.
• Then go to Sketch -> Import Library -> p5.dom. Now you can hit CTRL + R. :D
• "p5.dom" is needed b/c I'm using createElement() in my latest sketch version: :P

1. https://p5js.org/reference/#/libraries/p5.dom
2. https://p5js.org/reference/#/p5/createElement

GoToLoop

Andreas_Ref

Yeah, I was using the old deprecated one https://github.com/processing/p5.js-editor, guess its time to move on haha.

Thanks a lot for your help :-)

Andreas_Ref

Hey, the sketch (and your example on SketchPad: http://p5js.SketchPad.cc/sp/pad/view/ro.CJr$SpnCkgIPQC/latest) somehow stopped working even though https://ekstrabladet.dk/rss2/?mode=normal&submode=sport still spits out new headlines. Any clue why this is happening?

GoToLoop

Sorry, but I've got no idea why it's stopped working and dunno how to fix it. :(
Although http://CORS-Anywhere.HerokuApp.com proxy CORS site is still working. #-o
And this other sketch https://CodePen.io/GoSubRoutine/pen/Qdjmrm?editors=0012 is still OK. :-?

GoToLoop

Good news for ya @Andreas_Ref! :-bd
Just found out another CORS proxy which works for http://EkstraBladet.dk at:
https://Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347

Here's the updated sketch: http://p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC

/**
 * loadXML from EkstraBladet (v1.3)
 * Andreas_Ref & GoToLoop (2017-May-19)
 *
 * Forum.Processing.org/two/discussion/22668/issue-loading-xml-feed-in-p5js#Item_11
 * Gist.GitHub.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CJr$SpnCkgIPQC
 *
 * EkstraBladet.dk/rssfeed/sport/
 * EkstraBladet.dk/rss2/?mode=normal&submode=sport
*/

"use strict";

const HTTP = 'http:' + '//',
      //PROX = 'CORS-Anywhere.HerokuApp.com/',
      PROX = 'Dry-Sierra-94326.HerokuApp.com/',
      SITE = 'EkstraBladet.dk/',
      RSS1 = 'rssfeed/',
      RSS2 = 'rss2/',
      FILE = 'rss.xml',
      QRY0 = 'sport/',
      QRY1 = '?mode=' + 'normal', QRY2 = '&submode=' + 'sport',
      URI1 = HTTP + PROX + HTTP + SITE + RSS1 + QRY0,
      URI2 = HTTP + PROX + HTTP + SITE + RSS2 + QRY1 + QRY2,
      URI  = URI1,
      //URI  = URI2,
      REMOTE = true,
      titles = [];

let xml;

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

function setup() {
  noCanvas();

  for (const item of xml.getChild('channel').getChildren('item'))
    titles.push(item.getChild('title').getContent());

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

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

Andreas_Ref

Thank you so much ^:)^