node.jsexpresstemplatingpugoboe.js

nodejs / express / oboe.js & pug: Get node() events to update the dom


First time working with node and template engines (yes i know, terrible place to "start" but whatever). I'm building some content from a json stream, and at the end I would like to spit this content out to a div in my html page, as follows in this (updated) expressjs snippet:

app.get('/foo', function (req, res) {

  //... get my stream called 'mystream'

  //... get ready to append content for items found in json stream
  var htmlbuf = "";

  //now process the json stream:
  oboe(mystream)
  .node('{bar}', function(aBar){
    //eventually, I'd like to actually append individual new DOM elements,
    //but for now I'll settle for just spitting out raw html:
    var buffer = '<p>Found a bar with name'+ aBar.name + '</p>';
    res.render('index', {itemsfound: htmlbuf});
    });
});

index.pug:

doctype html
html
    head
        link(type='text/css', rel='stylesheet', href='./css/main.css')
        title Hello
    body
        h1 Hello world!
        div#results.listing
            items= itemsfound

I get the error 'Error: Can't set headers after they are sent'. So I believe the issue is that the oboe.node() is firing at any time and I am not sending the response content at the right time? What is the code/framework needed to wire the oboe.node() events so that they can target or create dom elements in my pug template and send the response correctly? Thanks.


Solution

  • You'll need to do something like this:

    app.get('/foo', function (req, res, next) {
    
      //... get my stream called 'mystream'
    
      //... get ready to append content for items found in json stream
      var htmlbuf = "";
    
      //now process the json stream:
      oboe(mystream)
      .node('{bar}', function(aBar){
        //eventually, I'd like to actually append individual new DOM elements,
        //but for now I'll settle for just spitting out raw html:
        htmlbuf += '<p>Found a bar with name' + aBar.name + '</p>';
      })
      .on('fail', function (err) {
        res.statusCode = err.statusCode
        next(err.thrown)
      })
      .on('done', function () {
        res.render('index', {itemsfound: htmlbuf});
      });
    });