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

Я попытался получить данные из баз данных mysql, h2, derby, но ничего не получилось. Я пробовал точно так же, как это было дано на веб-сайте w2schools. Но позже я подумал, что попробую с помощью функции Array и проверить с помощью JSP-страницы Java на моей странице 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, который я пробовал, но не работал.

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

источник

2016-02-06 user2059387

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

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

Если это не работает, отлаживать, если вы получаете надлежащего JSON от сервера. Откройте некоторые инструменты для работы с огнем/инструменты для разработчиков (обычно f12) и см. network.

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

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

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

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

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

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

источник

2016-02-06 08:43:55 cyan

Да, ответ не совсем правильно с моего сервера. Ответ от сервера выглядит следующим образом: {"records": [{"Name": "Alfreds Futterkiste"}, {"Name": "B's Beverages"}, {"Name": "Berglunds snabbköp"}, {«Имя»: «Blondel père et fils»}, {«Имя»: «Bólido Comidas prepareadas»}, {«Имя»: «Приложение для Bon»}, {«Имя»: «Comércio Mineiro»}]} Я попытался сделать это с JSON-типом, но удалив все лишние вещи с моей страницы jsp, так как в html-файле не изменится ответ. И я нашел ответ в виде простого текста, но не JSON. Не могли бы вы проверить и дать мне знать, как получить ответ в формате JSON, используя jsp, пожалуйста. – user2059387

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

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

<%@ 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>

источник

2016-02-06 13:33:15 user2059387

Таким образом, тип контента должен быть установлен на json на стороне сервера. – cyan

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

ответ

Смежные вопросы