Home/ Questions/Q 9148353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:14:56+00:00

I am searching for something which renders an HTML template starting from a JSON

  • 0

I am searching for something which renders an HTML template starting from a JSON file of data.

The matter is that the plugin/framework/library I’m searching for must create itself the <html> template structure, starting from something very simple.

For example I have an simple html like this:

<ul>
  <li><li>
</ul>

and a json like this:

{
   "mylist":{
      "listone": 
          {"img" : "/img/pippo.gif" ,
           "text1" : "pluto",
           "text2" : "topolino",
           "link" : "http://www.sito.it"        
           },
      "listtwo":
          {"img" : "/img/pippo.gif" ,
           "text1" : "pluto",
           "text2" : "topolino",
           "link" : "http://www.sito.it"        
          }
   }
}

and I want the data to render in my document like this:

<ul>
  <li>
    <img src="/img/pippo.gif" />
    <h1>pluto</h1>
    <p><a href="http:://www.sito.it>topolino</a></p>
  </li>
</ul>

If I head already the entire structure I could use pure.js as usual, but, since I don’t have the inner tags in the li, can I inject the HTML code with the pure.js directives?
Or is it possible only with JsRender or similar?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Pure JS allows you to use JavaScript function with directives. Whatever is returned from that function, will be used as a value for a directive.

    The argument of the function is an object with the following
    properties:

    • context : This is the full JSON that was passed for transformation
    • item* : the current loop item
    • items* : all the items of the loop
    • pos* : the current position in the loop. An integer when iterating an array, a property name iterating on a collection

    The following example shows how to do it. 

    var data = {
  "img": "/img/pippo.gif",
    "text1": "pluto",
    "text2": "topolino",
    "link": "http://www.sito.it"
}

var directive = {
  'li': function (arg) {
    return "<img src=\""+arg.context.img+"\" /><h1>"
      +arg.context.text1+"</h1><p><a href=\""
      +arg.context.link+"\">"+arg.context.text2+"</a></p>"
  }
}

$('ul').render(data, directive);

    The given HTML: 

    <ul><li></li></ul>

    Will become as following one (after rendering): 

    <ul>
  <li>
    <img src="/img/pippo.gif">
    <h1>pluto</h1>
    <p>
      <a href="http://www.sito.it">topolino</a>
    </p>
  </li>
</ul>

    I hope that will help.

    • 0