Angular + JSON: Return does not appear in table

Asked

Viewed 244 times

-1

Hello, everyone. I am studying and doing some programming tests with PHP + Angularjs. I searched everywhere, but I couldn’t print in an html table the array generated by PHP.

Can anyone help me? I’ll be very grateful!

The code goes below.

index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <meta charset="UTF-8">

    <script src="js/jquery.min.js"></script>    
    <script src="js/angular.min.js"></script>
    <script src="js/angular-script.js"></script>
</head>

<body ng-app="App" ng-controller="AppCtrl">
    <div>
        <table>
            <tr>
                <th>ID</th>
                <th>Nome</th>
                <th>Email</th>
            </tr>
            <tr ng-repeat="detail in details">
                <td>{{detail.id}}</td>
                <td>{{detail.nome}}</td>
                <td>{{detail.email}}</td>
            </tr>
        </table>
    </div>  
</body>

</html>

angular-script.js

var App = angular.module('App',[]);

App.controller('AppCtrl',function($scope, $http){
    $http.post("usuarios.php").success(function(data){
        $scope.details = data;
    });
});

php users.

<?php

$con = mysqli_connect("127.0.0.1", "root", "", "banco");

$query = "SELECT * from tab_usuarios";
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) != 0) {

    $i = 0;
    $arr = array('usuarios' => array());
    while($row = mysqli_fetch_assoc($result)){

        $arr['usuarios'][$i]['id'] = utf8_encode($row['id']);
        $arr['usuarios'][$i]['nome'] = utf8_encode($row['nome']);
        $arr['usuarios'][$i]['email'] = utf8_encode($row['email']);
        $i++;            
    }            
    echo json_encode($arr);
?>

When I run users.php, it returns the following array:

    {"usuarios":[{"id":"1","nome":"Paulo Oliveira","email":"[email protected]"},{"id":"2","nome":"Olivia Pereira","email":"[email protected]"},{"id":"3","nome":"Lucio Costa","email":"[email protected]"}]}
javascript angularjs json

2 answers

0

Just for the record, with the correction @victor_nascimento_j_gomes posted, the code worked perfectly.

I altered: 

$scope.details = data;

for:

$scope.details = data.usuarios;

  • To register that his function worked, simply select his answer as "accept" http://meta.pt.stackoverflow.com/questions/452/question-j%C3%A1-has-defined-by%C3%A9m-n%C3%A3o-has-been-marked-as-accepted? Rq=1

0


I believe it’s because you’re forgetting to mention that you want the content within the json array, it would look like this:

$http.post("usuarios.php").success(function(data){
  $scope.details = data.usuarios;
});

See you around!

  • I made that change, but it didn’t work.

  • Someone else can give me a light?

  • Put a console.log(data); and try to see by the page inspector of your browser, take a print for us to see how it is returning.

  • Buddy, it worked out!

  • I had included the change you had posted in my original code and it didn’t work. I decided to implement exactly the excerpt I wrote here for the OS and, with its correction, it worked. I’ll check my entire code, because there must be some comma out of place.

  • thank you very much!

Show 1 more comment

Browser other questions tagged javascript angularjs json

You are not signed in. Login or sign up in order to post.