Question

I wrote a video gallery web app a few months ago in CodeIgniter and I’m trying to move the back end to Node, using Express + Jade to produce the content. The PHP version sends JSON to the front end, often including a substantial chunk of HTML.

I’d like to render the HTML bit with Jade (as that’s what it’s there for), but obviously I want to output it in JSON format and not straight to the browser. It may be painfully obvious how to do this, but I just can’t figure it out at the moment… Any help very much appreciated.

Original PHP

ob_start();

for ($i = $start; $i < $end; $i++)
{
    $v = $videos[$i];
    echo '<a id="video-' . $v->url . (isset($v->otherid) ? '-' . $v->otherid : '') . '" href="#!' . Settings::$pretty_link . '/' . $v->url . (isset($v->otherid) ? '/' . $v->otherid : '') . '" class="Box' . ($i == $start ? " Batch" : "") . '" title="Click to view the ' . $v->name . '"><img src="' . site_url('images/thumb/' . $v->image) . '" alt="The ' . $v->name . '" /><span>' . $v->name . '</span></a>';
}

$data[$html] = ob_get_clean();

// Add some other things to $data

echo json_encode($data);

Shiny new Jade

- var v
- for (var i = view.start; i < view.end; i++) {
-   v = view.videos[i]
    a(id="#{v.url + (v.otherid === null ? "" : "-" + v.otherid)}", 
        href="#!#{settings.prettyLink + "/" + v.url + (v.otherid === null ? "" : "/" + v.otherid)}/",
        class="Box #{i == view.start ? "Batch" : ""}",
        title="Click to view the #{v.name}"
    )
        img(src="#{settings.siteUrl}images/thumb/#{v.image}", alt="The #{v.name}")
        span #{v.name}
- }

How do I do the $data[$html] = ob_get_clean(); line? (And possibly also the json_encode one, though I currently have high hopes for JSON.stringify. 🙂

Edit As @loganfsmyth requested, the code used to render the Jade file (basically just the same as the Express examples).

res.render("search", { view: view, settings: vgSettings.app });

Answer 1

Haven’t tried it, though from the Express docs, this should work:

res.render('yourJadeView', { someOptionalLocal: 'someValue' }, function(err, string) {
    res.json({html: string});
});