0

I have an array of objects that each contain a value of raw HTML. The raw html is an oEmbed object, with javascript, css, and html in a single string.

I would like to iterate each string of raw html into css flex boxes, but can't seem to figure out how.

<! -- attempt 1 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item
        p!= #{post.html}

<! -- attempt 2 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item 
        include content.html #{post.html}

<! -- attempt 3 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item #{post.html}

Attempt #1 stemmed from this post. I get an Unexpected token ILLEGAL error on the p!= line when I tried that.

I thought I had read something that had said html was a built in filter for jade. Couldn't find it anywhere in the docs though. Attempt #2 was trying to implement it, but I think I need to have a .html file saved down. Currently the html is only stored in a variable.

Attempt #3 renders something on the page when I substitute #{post.title} for #{post.html}, so the error is not in the each post in posts function.

Can jade handle a direct html write? Would I be better off trying to use document.body.innerHTML in a function and see if I can inject it to the flex boxes that way?

Any help is greatly appreciated!

Community
  • 1
  • 1
0xPingo
  • 2,047
  • 4
  • 19
  • 43

1 Answers1

1

After reading some documentation from Jade Attributes and Jade logic tutorial, i hope this answer will help you :

Node.js
Just call node server.js to see the output.

file : sever.js 

var jade = require('jade');
var data = [
  {"extId":"eg1" , "html":"<div>Everything you want 1<script>alert('hello1');</script></div>"},
  {"extId":"eg2" , "html":"<div>Everything you want 2<script>alert('hello2');</script></div>"},
  {"extId":"eg3" , "html":"<div>Everything you want 3<script>alert('hello3');</script></div>"},
];

var html = jade.renderFile('testing.jade', {posts : data , pageTitle : 'TestingJade'});

console.log('html : ' , html);

file : testing.jade 

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 Jade - node template engine
    ul
      each post ,index in posts 
        - var curId = post.extId
        li(id= curId)= post.html

Read the docs i provide, it will help you to understand.
The use of index in each post ,index in posts seem to be important !
After that we define a variable handling the "ID", like that we can set it to the tag using the 'attributes' definition.
And at last, we set the content using = to escape the post.html 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TestingJade</title>
</head>

<body>
  <h1>Jade - node template engine</h1> 
  <ul>
    <li id="eg1">&lt;div&gt;Everything you want 1&lt;script&gt;alert('hello1');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg2">&lt;div&gt;Everything you want 2&lt;script&gt;alert('hello2');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg3">&lt;div&gt;Everything you want 3&lt;script&gt;alert('hello3');&lt;/script&gt;&lt;/div&gt;</li>
  </ul>
</body>

</html>

Note that if you don't want to escape the content of post.html use != 

li(id= curId)!= post.html/*
             ^
instead of   |
             v 
li(id= curId)= post.html*/

the output should be :

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TestingJade</title>
</head>

<body>
  <h1>Jade - node template engine</h1> 
  <ul>
    <li id="eg1">
      <div>Everything you want 1
        <script>
          alert('hello1');
        </script>
      </div>
    </li>
    <li id="eg2">
      <div>Everything you want 2
        <script>
          alert('hello2');
        </script>
      </div>
    </li>
    <li id="eg3">
      <div>Everything you want 3
        <script>
          alert('hello3');
        </script>
      </div>
    </li>
  </ul>
</body>

</html>

So transposing it to your code :

<! -- attempt 4 -->
div.container
  h2 posts
    ul.flex-container
      each post, index in posts         
        li.flex-item= post.html
Anonymous0day
  • 3,012
  • 1
  • 14
  • 16