nikmit has asked for the wisdom of the Perl Monks concerning the following question:

Hi guys,

I need to provide a perl array of about 400 elements to javascript code in an html page. I am already using (and learning) Template Toolkit to separate perl from html.

My options as I currently see them:

a) print out the array along with the rest of the js code in the header of the page

b) some suggest JSON should be used for this, I would need to read-up

c) look for a built-in function within Template Toolkit that already does that

d) ...?

I am looking for a balance of code efficiency/speed and ease of use - I'm not a dedicated web developer and don't want to spend weeks learning a language for a small increase in speed... then again if my current knowledge is archaic I don't want to sit in the stone age :)

  • Comment on Providing perl array data to javascript code

Replies are listed 'Best First'.
Re: Providing perl array data to javascript code
by Eily (Monsignor) on Nov 19, 2015 at 09:54 UTC

    Your a) and b) solutions are not exclusive. Since the JS in JSON stands for JavaScript, using JSON to transmit data just means writing it in a JavaScript format. So if you embed that JSON output in the code somewhere, that's your solution one.

    Outputing JSON with perl is ridiculously easy with the JSON module: use JSON; my $json = encode_json $nested_arrays_and_hashes; (or to_json, both are not stricly equivalent, but you can do a bit of documentation reading :) ). Once your data is in an easy to use format, you have to decide weither you want it to be statically embeded in the pages' code, or if it should be fetched asynchronously

[reply]
[d/l]
Re: Providing perl array data to javascript code
by Anonymous Monk on Nov 19, 2015 at 09:52 UTC

    I need to provide a perl array of about 400 elements to javascript code in an html page.

    So you need to print out a javascript array -- yeah, thats called JSON

[reply]
Re: Providing perl array data to javascript code
by Lennotoecom (Pilgrim) on Nov 20, 2015 at 06:27 UTC
    one of the options: create a webpage that check the availability of the file
    with some interval
    <html>
<body onload = 'init()'>
<script lang = 'text/javascript'>

function init(){

setInterval(function(){
    get('numbers.json', function(r){
    
    if(r == 'error'){
        console.log('waiting for data');        
    }
    
    for(var i in r['num']){
    console.log(r['num'][i]['text'] + ': ' + r['num'][i]['value']);
    }
    })}, 5000);
    
    
}
    
function get(file, callback){
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open('GET', '/' + file, true);
xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-for
+m-urlencoded');
    
xmlHttpRequest.onreadystatechange = function (){
    if(xmlHttpRequest.status == 404){
        xmlHttpRequest.abort(); callback('error'); return;
    }
    if(xmlHttpRequest.status == 200 && xmlHttpRequest.readyState == 4)
    {
        callback(JSON.parse(xmlHttpRequest.responseText)); return;
    }
}
    xmlHttpRequest.send();
}    
</script>
</body>
</html>

    [download]
    then perl script which prepares json:
    %a = qw/one 1 two 2 three 3 four 4 five 5/;
$l = keys %a;
open OUT,'>numbers.json' or die $!;
print OUT "{\"num\":[\n";
for(sort keys %a){
    print OUT '{"text":"'.$_.'", "value":"'.$a{$_}.'"}';
    --$l ? print OUT ",\n" : print OUT "\n";
}
print OUT "]}\n";
close OUT;

    [download]
    everything goes around and checks the file
    if there is none, the thing is ok with it
    once the file appears, it loads its innards
    ugly ? yes,
    working ? also yes
    alrighty then
[reply]
[d/l]
[select]

Back to Seekers of Perl Wisdom