mysql — отображает php выбранные данные JSON с угловым ngRepeat

Question

mysql — отображает php выбранные данные JSON с угловым ngRepeat

Я хочу отобразить данные, которые я выбираю из базы данных MySQL, используя PHP. Данные должны быть показаны в угловых переменных.
Я вижу JSON при нажатии на кнопку, которую я установил. Но данные не будут отображаться в угловых переменных. Поэтому я думаю, что проблема заключается в связи между php и angular на обратном пути от php к angular.

Вот файлы, которые я использую. Где я должен внести изменения, чтобы получить то, что я хочу?

Спасибо!

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>nutrimeal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="col-sm-10 content">
<h1>M E A L S</h1>
<form action="./php/meal_select.php" method="post">
<input class="btn btn-default" type="submit" value="display meals"/>
</form>
<div ng-controller = "MealsController as meals">
<p>The meals should be shown underneath</p>
<div ng-repeat="meal in meals">
{{ meal.name }}
{{ meal.daytime }}
</div>
</div>
</div>
</div>
<!-- Javascript references -->
<script src="./js/vendors/bootstrap.js"></script>
<script src="./js/vendors/angular.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

app.js

var app = angular.module('MyApp', ['ngRoute'])

// MealsController
app.controller('MealsController', [ '$http', function($scope, $http) {
$scope.displayData = function(){
var meals =  $http.get('./backend/meal_select.php')
//   .then(function (response) {$scope.accounts = response.data.records;} );
.then(function (data) {
$scope.meals = data });
};
$scope.displayData()
}]);

meal_select.php

<?php

// connection settings
$servername = "localhost";
$username = "root";
$password = "qwertz";
$dbname = "example_nutrition";

// create connection to db
$conn = new mysqli($servername, $username, $password, $dbname);

// check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// set SQL command
$sql = "SELECT meal_id, name, daytime FROM meal";

// query db
$result = $conn->query($sql);

// show results
if ($result->num_rows > 0) {
// output data of each row
$r=array()
while($row = $result->fetch_assoc()) {
$r=[] = $row;
//simple output
// echo " Account Name: " . $row["account_name"].
//    " Balance: " . $row["initial_balance"].
//  " Currency: " . $row["currency"].  "<br>";

// output as JSON
//$json_array = json_encode($row);
$json_array = json_encode($r);
header('Content-type: application/json');
echo $json_array;
}
}
// if nothing was found
else {
echo "0 results";
}

// close connection to db
$conn->close();
?>

JSON отображается после нажатия кнопки

{ «Meal_id»: «1», «имя»: «чизбургер», «дневной»: «обед»}
{«food_id»: «2», «name»: «chili con carne», «daytime»: «lunch»}

1

angularjs angularjs-ng-repeat json mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

РЕДАКТИРОВАТЬ

PHP

$row = array();
$sql = "SELECT * FROM ...";
$result = mysqli_query($conn,$sql);
if($result){
while($r = mysqli_fetch_assoc($result)) {
$rows[] = $r;
}
print json_encode($rows);

угловатый

  $scope.showData = function(){
$http.get('data.php').then(function(response){
$scope.data = response.data;
}
$scope.showData();

});

HTML

<ul ng-repeat ="d in data">
<li> {{d.name}}</li>
<li> {{d.age}}</li>
...
</ul>

Я думаю, что этот код выше прост и вы можете понять, но я объясню немного. В угловых у нас есть два варианта ng-repeat:

1.Object

2.Array

Если вы используете object внутри ng-repeat тогда вам нужно использовать что-то вроде этого:

<ul ng-repeat="(key, value) in data">
<li> {{ key }} : {{ value }}</li>
</ul>

И если вы используете array внутри ng-repeat тогда вы можете сделать так:

<ul ng-repeat="d in data">
<li>{{ d.name}}</li>
<li>{{ d.age}}</li>
</ul>

Теперь поймите, что здесь происходит, вы получаете ответ от сервера, который является объектом, и пытаетесь напечатать его как массив, и это объясняет, почему он не работает (и вы забываете вызванную функцию). Вот почему я говорю, что вы добавляете двухстрочный код в php

$row = array();
$rows[] = $r;

Если у вас нет двух строк, ваш json является объектом, и вы не можете напечатать его как массив. Но если у вас есть две строки, ваш JSON массив, и вы можете напечатать его как массив

0