Получать json rest api и показывать это в AngularJS (Угловой 1)
у меня есть этот rest api, который возвращает мне имена базы данных. Тема состоит в том, что я попробовал несколько способов это показывать в AngularJS и не смог сделать это.
Url ответа .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;});
});Ответ Json
[{"nombre":"Example_example"},{"nombre":"Sebastian_Treend"},{"nombre":"Jose_Martinez"},{"nombre":"Demo_Demo"}]
Каковым был бы лучший способ возвращать правильно эти имена в scope?
Я перемещаю тебя пример с твоими данными, протестируй это:
<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>Если, открыв страницу, он не показывает данных, нажми F12, если у тебя есть этот ошибка:
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.Тогда он состоит из-за проблем CORS, в том, что уже она была бы темой помимо браузера, который ты был бы должен исследовать или консультироваться снова.
Привет
PD: Я оставляю задержание функционирования
PD 2: jejeje
анализируя твой код давно:
<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>Твоя ошибка, - в котором ng-repeat = "датирует in ямс" будь внутри первого tr, который соответствует head, но в body эти данные не присутствуют, он должен бы быть alrevez.
<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>Я надеюсь, что он подает ответ. Bye.
-
1В ответе на твой PD2 это старик jaja уже я понял и это упорядочил, но спасибо :p и если он окончательно дает мне эту ошибку XMLHttpRequest cannot, похвалите :( – 03.01.2017, 20:15
здесь у тебя есть пример функционируя, что делает то, в чем ты нуждаешься:
<!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>