How do I output Jade content through JSON? (Node.js)

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

Can you show the code you are using to render the jade file? — loganfsmyth, Feb 24 '12 at 02:50
@loganfsmyth Added it, though PuerkitoBio's answer below is what I'm trying to do. (Sorry for slow response - was bedtime.) — meloncholy, Feb 24 '12 at 14:59

score 5 · Accepted Answer · answered Feb 24 '12 at 03:08

5

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

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

answered Feb 24 '12 at 03:08

mna

22,989
6
46
49

Whoo! Thanks! Yes, it works as described. I somehow missed the callback fn option in the documentation, but this is exactly what I want to do. – meloncholy Feb 24 '12 at 14:56

score 0 · Answer 2 · answered Sep 06 '12 at 10:24

0

In case you'd want to output only JSON, this should do the job:

    res.json({ yourValue: 'hi there' });

A status code can be added:

    res.json(obj, status)

For example:

    res.json( { workouts: docs }, 200);

Or, places can be swapped, as in:

    res.json(status, obj);

With res.json there is no need to specify headers or call .end(). It will do everything by default.

answered Sep 06 '12 at 10:24

Alen Siljak

2,482
2
24
29

Thanks for the reply. As I tried to explain above, I was attempting to output some HTML that I'd generated via Jade as part of a JSON object. @PuerkitoBio's answer showed me how to do that. – meloncholy Sep 06 '12 at 16:31

How do I output Jade content through JSON? (Node.js)

2 Answers2