How to template a PURE HTML table from a Json url?!

4 views
Skip to first unread message

Davide Lorigliola

unread,
Apr 9, 2013, 9:41:49 PM4/9/13
to Pure-Unobtrusive...@googlegroups.com
Hi all folks!



I have a (I believe) simple question.

I have a Php generated-Json like this: http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consorzio-arcometa

In this Json, I have to;

1) select only the property "content"
2) insert the value of the property "content" in my HTML template. This value is an HTML table with the /n special character that means a carriage:

<table>\n<tbody>\n<tr>\n<th scope=\"col\">Comune</th>\n<th scope=\"col\">Pro loco</th>\n<th scope=\"col\">Informazioni</th>\n</tr>\n<tr id=\"primariga\">\n<td class=\"colonnacomune prima\">Castelnovo del Friuli</td>\n<td class=\"colonnaproloco prima\">Val Cosa</td>\n<td class=\"colonnainfo prima\"><a href=\"mailto:pro.cas...@hotmail.it\">pro.cas...@hotmail.it</a><br />\n<a href=\"http://www.provalcosa.it/\">www.provalcosa.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Clauzetto</td>\n<td class=\"colonnaproloco\">Clauzetto</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolococ...@gmail.com\">prolococ...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Meduno</td>\n<td class=\"colonnaproloco\">Meduno</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnaproloco\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolocori...@gmail.com\">prolocori...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Sequals</td>\n<td class=\"colonnaproloco\">Sequals</td>\n<td class=\"colonnainfo\"><a href=\"mailto:pro.s...@alice.it\">pro.s...@alice.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Spilimbergo</td>\n<td class=\"colonnaproloco\">I Due Campanili</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@iduecampanili.org\">in...@iduecampanili.org<br />\n</a><a href=\"http://www.iduecampanili.org/\">www.iduecampanili.org</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">Spilimbergo</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sopra</td>\n<td class=\"colonnaproloco\">Tramonti di Sopra</td>\n<td class=\"colonnainfo\"><a href=\"mailto:protramon...@virgilio.it\">protramon...@virgilio.it</a> <a href=\"http://www.protramontidisopra.it/\">www.protramontidisopra.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sotto</td>\n<td class=\"colonnaproloco\">Val Tramontina</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@protramontidisotto.com\">in...@protramontidisotto.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Travesio</td>\n<td class=\"colonnaproloco\">Travesio</td>\n<td class=\"colonnainfo\">protr...@libero.it</td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Vito d’Asio</td>\n<td class=\"colonnaproloco\">Alta Val d&#8217;Arzino</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">VAlle d&#8217;Arzino</td>\n<td class=\"colonnainfo\">in...@prolocoaltavaldarzino.it</td>\n</tr>\n</tbody>\n</table>\n

In TextWrangler I use the regular expressions options (Grep) and find/replace "\n" with "\r" so I get a "clean" HTML code of he table.


But how can I make the same in Pure? How the select only the property "content" and select it from the URL and not from a file like, in PURE's website examples?


THANKS in advance for your help!!

Davide

Mic (BeeBole)

unread,
Apr 10, 2013, 4:23:15 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
Hello Davide,

jQuery can parse the string to get the DOM node and use it to compile/render:
var compiledTemplate = $(obj.page.content).compile(directive);
$('.target').render(json, compiledTemplate);

if not you can use a regexp too in JS like:
obj.page.content.replace(/\n/g,'')




On Wednesday, April 10, 2013 3:41:49 AM UTC+2, Davide Lorigliola wrote:
Hi all folks!



I have a (I believe) simple question.

I have a Php generated-Json like this: http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consorzio-arcometa

In this Json, I have to;

1) select only the property "content"
2) insert the value of the property "content" in my HTML template. This value is an HTML table with the /n special character that means a carriage:

<table>\n<tbody>\n<tr>\n<th scope=\"col\">Comune</th>\n<th scope=\"col\">Pro loco</th>\n<th scope=\"col\">Informazioni</th>\n</tr>\n<tr id=\"primariga\">\n<td class=\"colonnacomune prima\">Castelnovo del Friuli</td>\n<td class=\"colonnaproloco prima\">Val Cosa</td>\n<td class=\"colonnainfo prima\"><a href=\"mailto:pro.cas...@hotmail.it\">pro.cas...@hotmail.it</a><br />\n<a href=\"http://www.provalcosa.it/\">www.provalcosa.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Clauzetto</td>\n<td class=\"colonnaproloco\">Clauzetto</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolococlauzetto@gmail.com\">prolococ...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Meduno</td>\n<td class=\"colonnaproloco\">Meduno</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnaproloco\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolocorichinveld...@gmail.com\">prolocorichinvel...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Sequals</td>\n<td class=\"colonnaproloco\">Sequals</td>\n<td class=\"colonnainfo\"><a href=\"mailto:pro.s...@alice.it\">pro.s...@alice.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Spilimbergo</td>\n<td class=\"colonnaproloco\">I Due Campanili</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@iduecampanili.org\">in...@iduecampanili.org<br />\n</a><a href=\"http://www.iduecampanili.org/\">www.iduecampanili.org</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">Spilimbergo</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sopra</td>\n<td class=\"colonnaproloco\">Tramonti di Sopra</td>\n<td class=\"colonnainfo\"><a href=\"mailto:protramontidisopr...@virgilio.it\">protramontidiso...@virgilio.it</a> <a href=\"http://www.protramontidisopra.it/\">www.protramontidisopra.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sotto</td>\n<td class=\"colonnaproloco\">Val Tramontina</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@protramontidisotto.com\">in...@protramontidisotto.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Travesio</td>\n<td class=\"colonnaproloco\">Travesio</td>\n<td class=\"colonnainfo\">protraves...@libero.it</td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Vito d’Asio</td>\n<td class=\"colonnaproloco\">Alta Val d&#8217;Arzino</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">VAlle d&#8217;Arzino</td>\n<td class=\"colonnainfo\">in...@prolocoaltavaldarzino.it</td>\n</tr>\n</tbody>\n</table>\n

Mic (BeeBole)

unread,
Apr 10, 2013, 4:31:21 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
one more thing about getting the json in your page.
You need to use something called JSONP, which is a technique to embed the json in a function call.

The most common way is to add a callback parameter in the URL you call. 
Luckily for you the API here has it:

Then declare in your page a global function:
function renderResult(json){
  alert(json.status);
}


On Wednesday, April 10, 2013 3:41:49 AM UTC+2, Davide Lorigliola wrote:
Hi all folks!



I have a (I believe) simple question.

I have a Php generated-Json like this: http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consorzio-arcometa

In this Json, I have to;

1) select only the property "content"
2) insert the value of the property "content" in my HTML template. This value is an HTML table with the /n special character that means a carriage:

<table>\n<tbody>\n<tr>\n<th scope=\"col\">Comune</th>\n<th scope=\"col\">Pro loco</th>\n<th scope=\"col\">Informazioni</th>\n</tr>\n<tr id=\"primariga\">\n<td class=\"colonnacomune prima\">Castelnovo del Friuli</td>\n<td class=\"colonnaproloco prima\">Val Cosa</td>\n<td class=\"colonnainfo prima\"><a href=\"mailto:pro.cas...@hotmail.it\">pro.cas...@hotmail.it</a><br />\n<a href=\"http://www.provalcosa.it/\">www.provalcosa.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Clauzetto</td>\n<td class=\"colonnaproloco\">Clauzetto</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolococlauzetto@gmail.com\">prolococ...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Meduno</td>\n<td class=\"colonnaproloco\">Meduno</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnaproloco\">S. Giorgio della Richinvelda</td>\n<td class=\"colonnainfo\"><a href=\"mailto:prolocorichinveld...@gmail.com\">prolocorichinvel...@gmail.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Sequals</td>\n<td class=\"colonnaproloco\">Sequals</td>\n<td class=\"colonnainfo\"><a href=\"mailto:pro.s...@alice.it\">pro.s...@alice.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Spilimbergo</td>\n<td class=\"colonnaproloco\">I Due Campanili</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@iduecampanili.org\">in...@iduecampanili.org<br />\n</a><a href=\"http://www.iduecampanili.org/\">www.iduecampanili.org</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">Spilimbergo</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sopra</td>\n<td class=\"colonnaproloco\">Tramonti di Sopra</td>\n<td class=\"colonnainfo\"><a href=\"mailto:protramontidisopr...@virgilio.it\">protramontidiso...@virgilio.it</a> <a href=\"http://www.protramontidisopra.it/\">www.protramontidisopra.it</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Tramonti di Sotto</td>\n<td class=\"colonnaproloco\">Val Tramontina</td>\n<td class=\"colonnainfo\"><a href=\"mailto:in...@protramontidisotto.com\">in...@protramontidisotto.com</a></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Travesio</td>\n<td class=\"colonnaproloco\">Travesio</td>\n<td class=\"colonnainfo\">protraves...@libero.it</td>\n</tr>\n<tr>\n<td class=\"colonnacomune\">Vito d’Asio</td>\n<td class=\"colonnaproloco\">Alta Val d&#8217;Arzino</td>\n<td class=\"colonnainfo\"></td>\n</tr>\n<tr>\n<td class=\"colonnacomune\"></td>\n<td class=\"colonnaproloco\">VAlle d&#8217;Arzino</td>\n<td class=\"colonnainfo\">in...@prolocoaltavaldarzino.it</td>\n</tr>\n</tbody>\n</table>\n

Davide Lorigliola

unread,
Apr 10, 2013, 5:55:04 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
Hi Mic,

thanks for your prompt answer!!!


Sorry, I didn't understand completely your explanation (I'm more a Web Designer that a coder).

jQuery can parse the string to get the DOM node and use it to compile/render:
var compiledTemplate = $(obj.page.content).compile(directive);
$('.target').render(json, compiledTemplate);


So, in this specific case, what I have to write in the first line? Something like:


???


Sorry but I work more with simple Jquery than pure Javascript....


Thanks in advance for your help!

Davide

Mic (BeeBole)

unread,
Apr 10, 2013, 7:18:14 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
You can try this if you have jquery:

$.ajax({ dataType: "jsonp", url:"http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consorzio-arcometa", success: function(json){ 

console.log(json);
var directive = {...},
compiledTemplate = $(json.page.content).compile(directive);
$('.target').render(json, compiledTemplate);

} });

Davide Lorigliola

unread,
Apr 10, 2013, 7:30:43 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
Thanks Mic, I'll try it this afternoon, 'cause I'm not at Mac now !!!

Only two preliminary questions: 

1) to replace "\n" with "\r" what code I have to place in directive?

2) How can I select only the "content" property in Json and his value (that is the tabel Html code)?


Still many thanks,

Davide

Mic (BeeBole)

unread,
Apr 10, 2013, 8:26:29 AM4/10/13
to Pure-Unobtrusive...@googlegroups.com
1) You do not need to replace the \n, but if you really want: json.page.content.replace(/\n/g, '')

2) The content is available in the success function with json.page.content

3) You should find someone who knows a bit more javascript around you to help you on this

Davide Lorigliola

unread,
Apr 10, 2013, 6:04:23 PM4/10/13
to Pure-Unobtrusive...@googlegroups.com
Ok, THANKS Mic! 

Your last reply was very important to me to understand!

So I wrote this code and it WORKS!

<html>


  <head>
 
<script src="jquery.js"></script>
    <script src="pure.js"></script>
    
    
     
 </head>
 
 

 
 
  <body>
 
 
   <div class="template">
      Hello  <span></span>
          </div>
 
 
 
  
    <script>

$.ajax({
  dataType: "jsonp",
  url:"http://www.prolocoregionefvg.it/api/get_page/?page_slug=tabella-consorzio-arcometa",
  success: function(json){ 

    console.log(json);
    var directive = {'.@span' : 'content' },
        compiledTemplate = $(json.page.content).compile(directive);
    $('div.template').render(json, compiledTemplate);

  }
});


      
    </script>

 
 
  </body>
  
  
  
  
  
</html>


Still many thanks!

Davide 
Reply all
Reply to author
Forward
0 new messages