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 19

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

Sign In or Register to comment.