使用角度不工作從本地值數組中提取數據

我試圖從mysql，h2，derby數據庫中提取數據，但沒有任何工作。我試着完全按照它在w2schools網站上給出的。但後來我想我會嘗試使用Array Function，並在我的AngularJS頁面中調用Java JSP頁面進行檢查。使用角度不工作從本地值數組中提取數據

下面是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），並參見網絡。

打開頁面並參見響應。複製並粘貼到一些json validation tool。如果JSON是正確的，那麼在角度應用程序中有些錯誤，但我看到一切都很好。

如果有正確的CORS配置，還檢查螢火蟲這個電話。如果您收到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」：「Berglundssnabbköp」}， {「Name」：「Blondelpèreet fils」}，{「Name」：「BólidoComidas preparadas」}，{「Name」：「Bon app」}，{「Name」：「Commercio Mineiro」}]} 我試圖使它成爲JSON類型，但從我的jsp頁面中刪除所有額外的東西，就像在html中的東西不會改變響應一樣。我發現響應是純文本但不是JSON。您可以請檢查並讓我知道如何使用jsp以JSON格式獲取響應。 – user2059387

好的我有我自己的答案，並且感謝cyan的幫助。這個問題是與響應，更新的代碼如下：

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>

來源

2016-02-06 13:33:15 user2059387

所以內容類型必須在服務器端設置爲json。 – cyan

使用角度不工作從本地值數組中提取數據

回答

相關問題