Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I output Jade content through JSON? (Node.js)
    text
    copied!<p>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. </p> <p>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. </p> <p><strong>Original PHP</strong></p> <pre><code>ob_start(); for ($i = $start; $i &lt; $end; $i++) { $v = $videos[$i]; echo '&lt;a id="video-' . $v-&gt;url . (isset($v-&gt;otherid) ? '-' . $v-&gt;otherid : '') . '" href="#!' . Settings::$pretty_link . '/' . $v-&gt;url . (isset($v-&gt;otherid) ? '/' . $v-&gt;otherid : '') . '" class="Box' . ($i == $start ? " Batch" : "") . '" title="Click to view the ' . $v-&gt;name . '"&gt;&lt;img src="' . site_url('images/thumb/' . $v-&gt;image) . '" alt="The ' . $v-&gt;name . '" /&gt;&lt;span&gt;' . $v-&gt;name . '&lt;/span&gt;&lt;/a&gt;'; } $data[$html] = ob_get_clean(); // Add some other things to $data echo json_encode($data); </code></pre> <p><strong>Shiny new Jade</strong></p> <pre><code>- var v - for (var i = view.start; i &lt; 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} - } </code></pre> <p>How do I do the <code>$data[$html] = ob_get_clean();</code> line? (And possibly also the <code>json_encode</code> one, though I currently have high hopes for <code>JSON.stringify</code>. :)</p> <p><strong>Edit</strong> As @loganfsmyth requested, the code used to render the Jade file (basically just the same as the Express examples). </p> <pre><code>res.render("search", { view: view, settings: vgSettings.app }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload