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

Hi, I am taking backend perl variables and using it at the front end for display. Here is the code. head1 and head2 are the header names taken from perl script. I use that and display those headers of grid on webpage. 

  
    var headname1= "@head1";
    var headname2= "@head2";

[download]
Now, if there are 100 headers, i would have to assign variables 100 times separately. so its better to make it dynamic. Taking values from backend and assigning it to javascript variable. This task will be dynamic. Here is my attempted code for that. I hav taken all the headers from backend and assigned it to line_array. @line_arry is the name of that array. If i do @line_arry[0] and so on. appropriate values will be displyaed. 
    var headname=[];
    
    for(var i=0;i<total_columns;i++) {
        headname[i+1]= "@line_arry[(i)]";
    }

[download]
This code doesnot work. It displays only the first column. i.e. 
     headname[1] = "Order";
     headname[2] = "Order";

[download]
Order is the name of the first header. In headname2, header of second column should be displayed. but it still displays "Order" If i write the below code, it displays first and second header. 
     headname[i+1]= "@line_arry[(0)]";
    headname[i+1]= "@line_arry[(1)]"; 

    "@line_arry[i]" doesnt work whereas 
    "@line_arry[0], @line_arry[1] works.

[download]
Can anyone suggeest why it is not performing looping action using variable i

Replies are listed 'Best First'.
Re: Loop function in Javascript fails when combined with perl array
by jeffa (Bishop) on Aug 26, 2015 at 22:50 UTC

    "Now, if there are 100 headers, i would have to assign variables 100 times separately. so its better to make it dynamic. "

    I recommend a hybrid solution that dynamically creates static Javascript: 

    use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = qw( foo bar baz qux );
    $c->stash( vars => \@array );
    $c->render( template => 'js', format => 'html' );
};

app->start;

__DATA__
@@ js.html.ep
<script>
<% for ( 0 .. $#$vars) { %>
var headname<%= $_ + 1 %> = "<%= $vars->[$_] %>";
<% } %>
</script>

    [download]

    Yields: 

    <script>

var headname1 = "foo";

var headname2 = "bar";

var headname3 = "baz";

var headname4 = "qux";

</script>

    [download]

    UPDATE: Better yet would be to shove them all into a Javascript array: 

    use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = map "'$_'", qw( foo bar baz qux );
    $c->stash( vars => \@array );
    {
        local $" = ', ';
        $c->render( template => 'js', format => 'html' );
    }
};

app->start;

__DATA__
@@ js.html.ep
<script>
var headname = <%== "[@$vars]" %>;
alert( headname );
</script>

    [download]

    jeffa

    L-LL-L--L-LL-L--L-LL-L--
-R--R-RR-R--R-RR-R--R-RR
B--B--B--B--B--B--B--B--
H---H---H---H---H---H---
(the triplet paradiddle with high-hat)
[reply]
[d/l]
[select]
      Hi friend, Mojo::JSON is core mojo and provides an encode_json , so 
      #!/usr/bin/perl --
use Mojolicious::Lite;
use Mojo::JSON qw/ /;
get '/' => sub {
    my $c = shift;
    my @array = ( 'hi', [ qw/ ro sham bo /], 'bye', );
    $c->stash( vars => \@array );
    $c->render( template => 'hello', format => 'html' );
};
app->start;
__DATA__

@@ hello.html.ep
<script>
var headname = <%== Mojo::JSON::encode_json( $vars ) %>;
alert( headname[0] );
</script>

__END__
no more templates no more books this is how you run it and what you ge
+t
$ perl mojo-hello-mojo-json.pl get /
[Wed Aug 26 16:55:06 2015] [debug] Your secret passphrase needs to be 
+changed
[Wed Aug 26 16:55:06 2015] [debug] GET "/"
[Wed Aug 26 16:55:06 2015] [debug] Routing to a callback
[Wed Aug 26 16:55:06 2015] [debug] Rendering template "hello.html.ep" 
+from DATA section
[Wed Aug 26 16:55:06 2015] [debug] 200 OK (0.004393s, 227.635/s)
<script>
var headname = ["hi",["ro","sham","bo"],"bye"];
alert( headname[0] );
</script>

      [download]
[reply]
[d/l]
Re: Loop function in Javascript fails when combined with perl array
by philipbailey (Curate) on Aug 26, 2015 at 22:20 UTC

    Where are the fragments of code you show running? In a CGI script? In a template? In a static page? The short answer is that you can't mix and match languages quite like that.

[reply]
Re: Loop function in Javascript fails when combined with perl array
by 1nickt (Canon) on Aug 26, 2015 at 22:12 UTC

    Is this question about Perl?

    The way forward always starts with a minimal test.
[reply]
[d/l]

Back to Seekers of Perl Wisdom