Issue loading xml-feed in p5js

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);
}

Answers

  • Answer ✓

    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);
    }
    
  • Super cool, thanks a lot!

  • 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).

  • edited May 2017

    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);
    }
    
  • 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.

  • edited May 2017 Answer ✓

    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
  • 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 :-)

  • 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?

  • 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. :-?

  • edited November 2017

    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);
    }
    
  • Thank you so much ^:)^

Sign In or Register to comment.