perl hash table and javascript var - perl

Question

I have a CGI script,
I want to enter a valus from perl hash table to java script var tt.
(I mentioned in the code what works and what does not)
perl:
%devices;
push #{$devices{$entity} }, $fname;
js:
\$('#example tr').click(function(){
\$(this, 'tr').each(function(index, tr) {
var lines = \$('td', tr).map(function(index, td) {
return \$(td).text();
});
var d = lines[0];
var test = '#{$devices{'192.116.153.32'}}'; // working
var tt = '\#\{\$devices{' + "\'" + d + "\'" + "\}\}"; // Not working
alert(tt);
The Alert will print something like:
{"192.116.153.32":["examle1.txt","examle2.txt",...]}

Answer 1

JavaScript and Perl are different languages. The JS code and the CGI script will run on different computers.
The CGI script creates a page that is then transmitted to the browser. It does not matter what kind of data this page is, any JS code is just plain data for this script. For example, your snippet might become
$('#example tr').click(function(){
$(this, 'tr').each(function(index, tr) {
var lines = $('td', tr).map(function(index, td) {
return $(td).text();
});
var d = lines[0];
var test = 'the corresponding device'; // working
var tt = '#{$devices{' + "'" + d + "'" + "}}"; // Not working
alert(tt);
This is what the browser sees. The Perl code has no meaning to the browser.
The browser then renders the page and executes any JS scripts. At this point, there is no connection to the CGI script any more.
If you want a connection to the server, you can use AJAX requests. Note however that the first CGI script that generated the page will have terminated by then, so all variables are lost – you need to store any data in a database.

Answer 2

You can use JSON module in Perl to convert reference to the Perl hash to the string containing JavaScript associated array:
use JSON; # imports encode_json, decode_json, to_json and from_json.
# simple and fast interfaces (expect/generate UTF-8)
$utf8_encoded_json_text = encode_json \%devices;
js:
\$('#example tr').click(function(){
\$(this, 'tr').each(function(index, tr) {
var lines = \$('td', tr).map(function(index, td) {
return \$(td).text();
});
var d = lines[0];
var test = '#{$devices{'192.116.153.32'}}'; // working
var tt = '$utf8_encoded_json_text'; // working
alert(tt);
The Alert will print something like:
{"192.116.153.32":["examle1.txt","examle2.txt",...]}