2

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.

4
  • 1
    So what fails? Can you show you angular code s=indicating how you are trying to consume this data?
    – Mike Brant
    Jan 15, 2013 at 16:53
  • When I use the text file (njs.json), the data shows up perfectly, and when I use the file on localhost as below, it just shows new lines (about 400 of them!): I call app.js from within the html file app.js reads: var App = angular.module('App', []); App.controller('TodoCtrl', function($scope, $http) { $http.get('localhost/t5/clis.json') //$http.get('njs.json') .then(function(res){ $scope.cli = res.data; }); });
    – Chris Dav
    Jan 15, 2013 at 17:10
  • 1
    the way you present the problem it must work, hence the question needs more information.
    – akonsu
    Jan 15, 2013 at 17:30
  • inside your "then" function, dump the res variable to the console to see what is there. in other words, try to debug it.
    – akonsu
    Jan 15, 2013 at 18:51

2 Answers 2

1

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.

1
  • This seems to have put me on track I changed the file name extension to php - instead of json, and voila - it works. Do not have a clue why, but as you suggested - the json was not coming across correctly. Hope this helps someone, and than you to all for your help.
    – Chris Dav
    Jan 15, 2013 at 21:19
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.