#!/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 get
$ 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>