Perl and AngularJS - Help Required

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

Monks,

I am trying to call Perl script using AngularJS POST method, but am not able to get back result to the front-end. I tried the same using PHP and getting result back.

Please find the UI code and Perl script. Could you please check and guide me what went wrong.

HTML page

<!DOCTYPE html>
<html >
<head>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("http://sample.com/cgi-bin/jsonTest.cgi")
   .then(function (response) {$scope.names = response.data.records;});
   });
</script>

</head>
<body>
 
<div ng-app="myApp" ng-controller="customersCtrl">
 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.name }}</td>
    <td>{{ x.email }}</td>
  </tr>
</table>
 
</div>
 
</body>
</html>
[download]

Perl Script: jsonTest.cgi

#!/usr/bin/perl -w
use strict;
use warnings;
use CGI;
use DBI;
use JSON;
my @output;
my $dbh = DBI->connect("dbi:mysql:database=test","usern","userp")  or 
+die "Connecting from Perl to MySQL database failed: $DBI::errstr";
my $sth = $dbh->prepare('SELECT name, email FROM user_tb');
$sth->execute;
while ( my $row = $sth->fetchrow_hashref ){ 
    push @output, $row;
}
my $cgi = CGI->new;
print $cgi->header( 'application/json' );
print objToJson( \@output );
[download]

if I run Perl script separately,can see output as

Getting output as
[{"email":"test@test.com","name":"test"},{"email":"test1@test.com","na
+me":"Testone"},{"email":"test2@test.com","name":"TestTwo",},{"email":
+"test3@test.com","name":"TestThree"}];
[download]

Thanks

Comment on Perl and AngularJS - Help Required Select or Download Code

Replies are listed 'Best First'.
Re: Perl and AngularJS - Help Required by 1nickt (Canon) on Jan 06, 2017 at 17:30 UTC
Hello, You said your web server is expecting a POST request, but your code uses `$http.get`. Hope this helps! The way forward always starts with a minimal test.	[reply] [d/l]
Re^2: Perl and AngularJS - Help Required by Anonymous Monk on Jan 06, 2017 at 18:24 UTC
sorry, its GET method only I tried, another example with POST method to submit form elements, didn't get result back Thanks	[reply]
Re: Perl and AngularJS - Help Required by Corion (Patriarch) on Jan 06, 2017 at 17:23 UTC
If you have a working PHP solution, that is great. Then you can conveniently compare the headers and content that your PHP script produces and send the identical headers and content from Perl. Also, for debugging, I would eliminate DBI from the equation and instead hardcode the contents of `@output`.	[reply] [d/l]
Re^2: Perl and AngularJS - Help Required by Anonymous Monk on Jan 06, 2017 at 18:25 UTC
Thanks, let me try your solution	[reply]
Re^2: Perl and AngularJS - Help Required by Anonymous Monk on Jan 07, 2017 at 09:25 UTC
hardcode the contents of @output, still its not working can you please provide sample program URL, if you have	[reply]
Re^3: Perl and AngularJS - Help Required by Corion (Patriarch) on Jan 07, 2017 at 09:58 UTC
I cannot produce a sample program for output I don't see. Please follow these three steps: Please show the headers and content your working PHP script produces. Then, show the headers and content your not-working Perl script produces. Then, modify your Perl script to produce the same header and content your PHP script produces.	[reply]
Re: Perl and AngularJS - Help Required by poj (Abbot) on Jan 07, 2017 at 14:30 UTC
You need the response to be `{"records":[{"email":"test@test.com","name":"test"} ..` [download] Try `#!/usr/bin/perl -w use strict; use warnings; use CGI; use DBI; use JSON; my %output=(); my $dbh = DBI->connect("dbi:mysql:database=test","usern","userp") or die "Connecting from Perl to MySQL database failed: $DBI::errstr" +; my $sth = $dbh->prepare('SELECT name, email FROM user_tb'); $sth->execute; while ( my $row = $sth->fetchrow_hashref ){ push @{$output{'records'}}, $row; } my $cgi = CGI->new; print $cgi->header( 'application/json' ); print to_json( \%output );` [download] or leave cgi and change the html. Remove `.records` and use `$scope.names = response.data;` or just change last line of cgi to `print to_json( { 'records' => \@output } );` poj	[reply] [d/l] [select]
Re^2: Perl and AngularJS - Help Required by Anonymous Monk on Jan 08, 2017 at 17:14 UTC
Thanks poj for your solution. Now its working fine	[reply]
Re: Perl and AngularJS - Help Required by huck (Prior) on Jan 07, 2017 at 01:38 UTC
Just to be sure, when you say "if I run Perl script separately,can see output as" do you mean you see that in a browser when you visit http://sample.com/cgi-bin/jsonTest.cgi or do you mean you see that after you run perl jsonTest.cgi?	[reply]
Re^2: Perl and AngularJS - Help Required by Anonymous Monk on Jan 07, 2017 at 09:09 UTC
when I visit URL http://sample.com/cgi-bin/jsonTest.cgi using browser, I can see output. But from AngularJS GET method, not getting any result	[reply]
Re^3: Perl and AngularJS - Help Required by huck (Prior) on Jan 07, 2017 at 12:18 UTC
"Getting output as" Did you copy and past that output, or type it in? If you did copy and paste it it has an anomaly that would cause the perl JSON process to toss an error .... it has a ; at the end, ... that isnt json. The page http://www.w3schools.com/angular/angular_http.asp shows an example with //Second function handles error that you might try to capture error output from its json processor. Me, id first try getting rid of the extraneous ; first	[reply]