Display data collected from MYSQL to html page using AngularJs and PHP
Question
I am new to AngularJS. I am working on an project where the application displays content from MYSQL(dummy table with flight details which has Airlines,departure,Arrival,Duration and Price columns) in a HTML table using PHP and AngualarJS. I have written the code for AngularJs and PHP. Now,when I try to display the retrieved data to html I am not able to do so(I tried to access my PHP file directly, and it displays the data in JSON formate ).Please look at my HTML(flights.html),JAVASCRIPT/AngularJS(Flights.js) and PHP(Flights.php) code:
HTML CODE
<!DOCTYPE html>
<html ng-app="mymodule">
<head>
<title>Flights</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Flights.js" type="text/javascript"></script>
</head>
<body ng-controller="myCtrl">
<table>
<thead>
<tr>
<th>Airlines</th>
<th>Departure</th>
<th>Arrival</th>
<th>Duration</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "flights in response">
<td>{{flights.Airlines}}</td>
<td>{{flights.departure}}</td>
<td>{{flights.Arrival}}</td>
<td>{{flights.Duration}}</td>
<td>{{flights.Price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
JAVASCRIPT CODE
var response;
var app = angular.module('mymodule', []);
app.controller('myCtrl', function($scope, $http)
{ $http.get("Flights.php")
.success(function(response)
{
//$scope.myWelcome = response;
//$scope.myWelcome = response.data;
$scope.response = response.data;
console.log(response);
})
.error(function()
{
$scope.response = "error in fetching data";
});
});
PHP CODE
<?php
$conn = mysqli_connect("localhost","","",'flight_details');
$data = array();
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
else
{
$sql = "select * from flights";
$result = $conn->query($sql);
if($result->num_rows > 0)
{
while ($row = $result->fetch_array())
{
$data[] = $row;
}
$res_final = json_encode($data);
echo $res_final;
}
else
{
echo"0 results";
}
$conn->close();
}
?>
moreover when I see the console I can find the objects(array elements) as Array[6]0: Object1: Object2: Object3: Object4: Object5: Objectlength: 6__proto__: Array[0] By this I am aware that data has been passed to javascript but by Angularjs code/javascript code is not appropriate. So, please help me with this, and thanks in advance
1 answers
solution1
0 2016-11-16 17:41:43
You should do:
$scope.response = response;
instead of:
$scope.response = response.data;
Here's why:
if you use the promise:
.then(function successCallback(response)
then you should do response.data ;
As you are using .success , the first argument already is your response.data . In this case you called it 'response' and this may have confused you. When using .success avoid naming the argument as 'reponse'. Use something like:
.success(function(data) {
$scope.lstWeeklyMenu = data;
Take a look at: http://www.codelord.net/2015/05/25/dont-use-$https-success/
and
https://www.peterbe.com/plog/promises-with- $http
In short:
The .then(response) you get the response object:
The response object has these properties:
- data – {string|Object} – The response body transformed with the transform functions.
- status – {number} – HTTP status code of the response.
- headers – {function([headerName])} Header getter function.
- config – {Object} – The configuration object that was used to generate the request.
- statusText – {string} – HTTP status text of the response.
https://docs.angularjs.org/api/ng/service/ $http
and using .success() each one of the response properties is an argument:
.success(data, status)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.