извлечение данных из локального массива значений с использованием угловых не работает

Question

извлечение данных из локального массива значений с использованием угловых не работает

Я пытался получить данные из баз данных mysql, h2, derby, но ничего не получалось. Я попробовал именно так, как было указано на сайте w2schools. Но позже я решил попробовать функцию Array и проверить страницу Java JSP на моей странице AngularJS, вызывая ее.

Ниже приведен index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td  {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>

Вот мой jsondata.jsp ниже:

<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>

<html>
<head>
<title>JSON Data</title>
<link rel="stylesheet" href="dist/css/bootstrap.css" />
</head>
<body>
<div class="container-fluid">
<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.print("{ \"records\":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.print("{\"Name\":\"" + names[i] + "\"}");
else
out.print("{\"Name\":\"" + names[i] + "\"}, ");
}
out.print(" ] }");
%>
</div>
</body>
</html>

Я даже попытался поместить index.html в качестве index.jsp и развернуть в tomcat. Но не работает. Даже код Php я пробовал, но не работает.

Пожалуйста, помогите мне.

0

angularjs java jsp php

Решение

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

Хорошо, я получил свой собственный ответ, и спасибо циан за помощь. Проблема была с ответом, обновленный код как ниже:

jsaondata.jsp (размещено на tomcat)

<%@ page contentType="application/json; charset=iso-8859-1" language="java" %>

<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.write("{ \"records\":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.write("{\"Name\":\"" + names[i] + "\"}");
else
out.write("{\"Name\":\"" + names[i] + "\"}, ");
}
out.write(" ] }");
%>

angulardata.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td  {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>

</body>
</html>

2

Источник

Accepted Answer

Попробуйте изменить код на:

$scope.names = JSON.parse(response.data).records;

Если это не работает, отладка, если вы получаете правильный JSON с сервера.
Откройте некоторые инструменты Firebug / Developer (обычно f12) и посмотреть сеть.

Откройте страницу и увидите ответ. Скопируйте и вставьте в некоторые инструмент проверки JSON.
Если JSON правильный, то в angular app что-то не так, но я вижу, что все в порядке.

Также проверьте в firebug этот вызов, если правильно настроен CORS.
Если вы получите результат 200 хорошо, то это нормально.

Также вы можете использовать $ журнал Сервис для отладки вашего результата:

app.controller('customersCtrl', function($scope, $http,$log)

.then(function (response) {$log.debug('response',response);

Я надеюсь, что это помогает.

1