Re: Loop function in Javascript fails when combined with perl array

[jeffa]

"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>

Yields:

<script>

var headname1 = "foo";

var headname2 = "bar";

var headname3 = "baz";

var headname4 = "qux";

</script>

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>

[Anonymous Monk]

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>