Get json of a rest api and show it in angular

Question

Get json of a rest api and show it in angular

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have this rest api that returns names of a database. The issue is that I have tried several ways to show it in angular and I have not managed to do it.

Url of the answer .json

http://samp.newclan.com.uy:3000/api/names

AngularJS

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

app.controller('namesController', function($scope) {
    $http.get("http://samp.newclan.com.uy:3000/api/names")
    .then(function (response) {$scope.names = response.data;});
});

Answer Json

[{"nombre":"Example_example"},{"nombre":"Sebastian_Treend"},{"nombre":"Jose_Martinez"},{"nombre":"Demo_Demo"}]

What would be the best way to correctly return these names in the scope?

angularjs rest

asked by Santiago D'Antuoni 03.01.2017 в 18:53

source

2 answers

1

Here is a working example that does what you need:

                                                            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="col-md-6" ng-app="adminPanel" ng-controller="namesController">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Nombre</th>
        </tr>
      </thead>
      <tbody ng-repeat="data in names">
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  </body>
</html>

<script type="text/javascript">var app = angular.module('adminPanel', []);

app.controller('namesController', function($scope, $http) {

var root = 'https://jsonplaceholder.typicode.com';

$http.get(root + "/users")
    .then(function (response) {
    $scope.names = response.data;
    });
});</script>

answered by 03.01.2017 в 19:17

Dropdrown button inside ul How to improve (refactor) this code from JQUERY AND AJAX?

score 1 · Accepted Answer

I give you an example with your data, try it:

<script>
var app = angular.module('adminPanel', []);
app.controller('namesController', function($scope,$http) {
    $http.get("http://samp.newclan.com.uy:3000/api/names")
    .then(function (response) {$scope.names = response.data;});
});
</script>

<!DOCTYPE html>
<html lang="en" ng-app="adminPanel">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>

<body>

    <div class="col-md-6" ng-controller="namesController">
        <table class="table">
            <thead>
                <tr ng-repeat="data in names">
                   <td>{{data.nombre}}</td>
                </tr>
            </thead>
        </table>
    </div>

</body>

</html>

If when opening the page does not show the data, press F12, if you have this error:

XMLHttpRequest cannot load http://samp.newclan.com.uy:3000/api/names. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Then it is because of CORS problems, that it would be a separate issue of the browser that you should investigate or consult again.

Greetings

PS: I leave performance capture

PD 2: hehehe

Analyzing your code some time ago:

 <table class="table">
      <thead>
        <tr ng-repeat="data in names">
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
          <td>{{data.country}}</td>
          <td>@mdo</td>
        </tr>
      </tbody>
    </table>

Your error is that ng-repeat="data in names" is inside the first tr that corresponds to the head, but in the body that data is not present, it should be around.

 <table class="table">
          <thead>
            <tr >
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="data in names">
              <th scope="row">1</th>
              <td>{{data.name}}</td>
              <td>{{data.country}}</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>

I hope it serves the answer. Bye ...