How to pass a json from PHP to AngularJS

Question

I'm new to web development and so this might be a simple issue for some and hopefully a useful thread for other beginners.

I'm selecting some data (accounts) from a mysql database by using a php script. I want this selected data to be passed to an angular variable so I can create the output by using ngRepeat. What do I have to change in my PHP and/or Angular files?

Now that the JSON is build the problem is, that I don't get back to the html I called the PHP from. How do I manage that?

Thank you for your help Chris

HTML

<form action="./backend/display_accounts.php" method="post">
  <input class="btn btn-default" type="submit" value="display accounts"/>
</form>
<ul>
  <li ng-repeat="account in accounts">
  {{ account.account_name }}
  </li>
</ul>

PHP

<?php 
include 'connect.php';
$sql = //myQuery//
$result = $conn->query($sql);
//return ($result);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$json_arry = json_encode($row);
echo $json_array;}
}
else {
      echo "0 results";
}
$conn->close();
?>

AngularJS

var app = angular.module("myApp", ['ngRoute'])
app.controller('accountsController', function($scope, $http) {
$scope.displayData = function(){
$http.get("./backend/display_accounts.php")
 .then(function (response) {$scope.accounts = response.data.records;});
};
});

Where are you facing the problem? Are you getting any kind of error from anywhere? — Suresh
– Suresh, Commented May 2, 2017 at 7:05
The problem is, that I don't see a result on the page. But I think this could be before the html with the $http.get. How can I locate the problem clearly? — Christian
– Christian, Commented May 2, 2017 at 19:20
Now that the JSON is build the problem is, that I don't get back to the html I called the PHP from. How do I manage that? — Christian
– Christian, Commented May 2, 2017 at 19:48
I think you have missed 'ng-app="myApp"' in your HTML. Haven't you? — Kushan Randima
– Kushan Randima, Commented May 3, 2017 at 5:02
As I click on the button I see the JSON displayed. I was expecting the data on the site when opening it. Why am I wrong with that? — Christian
– Christian, Commented May 3, 2017 at 5:07

Kushan Randima · Accepted Answer · 2017-05-02 07:01:46Z

1

Since you have already obtained the data into a variable (accounts). You can use following code in the html to see the results

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="account in accounts">
      {{ account }}
    </li>
  </ul>
</div>

</body>
</html>

answered May 2, 2017 at 7:01

Kushan Randima

2,3005 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kushan Randima Over a year ago

Please ask me if you need any clarification. I can understand that you are a newbie to Angular :-)

Akashii Over a year ago

Nice answer , but i think you should explain clearly for him . If you use {{account}} you will get the json file

Kushan Randima Over a year ago

@ThanhTùng: Thanks for the consideration. I got your point :-)

Christian Over a year ago

Thanks guys. But that didn't work. I don't see anything on that page but also don't get any error message. But I do get a result out of the select.

Akashii · Accepted Answer · 2017-05-02 07:46:49Z

I think you should change a bit . In php

$sql = //myQuery//
$row = array(); //here is change
$result = $conn->query($sql);
return ($result);
if ($result->num_rows > 0) {
while($r= $result->fetch_assoc()) {
$row[]= $r; //here is change
$json_arry = json_encode($row);
echo $json_array;
}

And in angular

$http.get("./backend/display_accounts.php")
 .then(function (response) {$scope.accounts = response.data;}); //you dont need record in here if json file of you dont have the key records
};

if json file of you like you should need records but if not . you dont need it.

{"records":
[
{// your data}]}

If json file of you have a ,b ,c or some thing instead records , you should write like this

$scope.accounts = response.data.a; //a b c or some thing for ex I use a

And you can display in html like

<ul ng-repeat= account in accounts>
 <account. ...>
</ul>

CristianR · Accepted Answer · 2020-03-18 10:32:27Z

If you wanna get datas from several table queries in php, you could do with this code.

First, in output.php:

$sql1 = "SELECT ....";
$result = $conn->query($sql1);

$r ['value1']= array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $r['value1'][] = $row;
    }
}

$sql2 = "SELECT ....";
$result = $conn->query($sql2);

$r ['value2']= array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $r['value2'][] = $row;
    }
}

echo json_encode($r);

And in angular control:

var app = angular.module('ngApp', []);
app.controller('ngCtrl', function($scope, $http) {
    $http.get("output.php")
            .then(function (result) {
                console.log(result.data);
                $scope.firstvalue = result.data.value1;
                $scope.secondvalue = result.data.value2;
            });
});

Collectives™ on Stack Overflow

How to pass a json from PHP to AngularJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related