Very new to angular - just exploring at the moment. Would be very grateful for a pointer or two as to where I am going wring here - TIA
What I would like to do is take data from a mysql select query and return it into an html page, using json and then have angular to display it. Have succeeded in returning the data using JSON_encode - ran it through jsonlint and it has come back as fine. For testing, I then took this string and created a text file, and ran it through the angular file - it works fine.
If I call the data direct from the php file it fails, but if I call the data from a static text file (with what appears to be the same output as the php data) it works.
I am sending the data with echo - is this correct?
$json=json_encode($main_arr);
echo $json;
json output:
[{"custcode":"CMZIG001","cli":"0020\/1"},{"custcode":"CMZIG002","cli":"0020\/2"},{"custcode":"CMZIG003","cli":"0020\/3"},{"custcode":"999","cli":"002871365801"},{"custcode":"CMSLE001","cli":"0030"},{"custcode":"CMNIC001","cli":"0034"},{"custcode":"CMLIF001","cli":"0047"},{"custcode":"CMTON01101","cli":"0087\/1"},{"custcode":"CMTON01102","cli":"0087\/2"},{"custcode":"CMTRE001","cli":"0090"}]
Text file contents:
[{"custcode":"CMZIG001","cli":"0020\/1"},{"custcode":"CMZIG002","cli":"0020\/2"},{"custcode":"CMZIG003","cli":"0020\/3"},{"custcode":"999","cli":"002871365801"},{"custcode":"CMSLE001","cli":"0030"},{"custcode":"CMNIC001","cli":"0034"},{"custcode":"CMLIF001","cli":"0047"},{"custcode":"CMTON01101","cli":"0087\/1"},{"custcode":"CMTON01102","cli":"0087\/2"},{"custcode":"CMTRE001","cli":"0090"}]
In response to comments:
OK - I had hoped not to bore you with my code. An html file as below (I will try to format it correctly)
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>CLIs http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="TodoCtrl">
<ul>
<li ng-repeat="cli in cli">
{{cli.custcode}} - <em>{{cli.cli}}</em>
</li>
</ul>
</body>
</html>
app.js - currently set to call a php file on my server
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
$http.get('http://localhost/t5/clis.json')
//$http.get('njs.json')
.then(function(res){
$scope.cli = res.data;
});
});
clis.json (the php file on my server)
$con = mysql_connect("localhost","root","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$db='mutuxf';
mysql_select_db($db, $con);
$result = mysql_query("SELECT custcode, cli FROM clis limit 10");
while($row = mysql_fetch_assoc($result))
{
foreach($row as $key => $value)
{ $arr[$key] = $value; }
$main_arr[] = $arr;
}
$json=json_encode($main_arr);
echo $json;
?>
When I use the php file to raise the data, I merely get a bulleted list with no text, but when I use the text file (njs.json) the page works correctly.
firstly, i would recommend switching from .then() to .success() and .error(), so you know if all is going well.
other than that, since the question information is lacking and quite general, i would bet that the json fetching and building part on the server is the problem. maybe this link would help
the way they fetch it:
$data = file_get_contents("php://input");
$objData = json_decode($data);
pay attention to the comment, it might be key here:
// The request is a JSON request.
// We must read the input.
// $_POST or $_GET will not work!
in general- if you have the option to add or switch framework on the backend, i would recommend symfony/django for php or switch to RoR with RABL/GON to generate the jsons. it's so much easier and intuitive. hope it helps, it's been a while since i used vanilla php.
It's becauce you can not run php in a .json file, clis.json needs to be clis.php or you can have the php script write to a separate json file, which would hold the data