將JSON加載到角度

我是Angular.js的新成員。我試圖從我的本地url http://85.96.243.31/admin.productss/searchwithjson獲取json。 JSON內容是：將JSON加載到角度

[ 
    { 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1.png", 
     "productid": "3", 
     "price": "0.01", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "1 Cent", 
     "isbundle": 0, 
     "subcategory": "Cat2", 
     "taxincluded": 0, 
     "brand": "erer", 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1_thumb.png" 
    }, 
    { 
     "productid": "1", 
     "isactive": 1, 
     "isbundle": 0, 
     "taxincluded": 0, 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1_thumb.png", 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1.png", 
     "price": "15.00", 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "model", 
     "subcategory": "Cat2", 
     "sku": "12", 
     "brand": "erer" 
    }, 
    { 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1.png", 
     "productid": "4", 
     "price": "123.00", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "2", 
     "model": "qwert", 
     "isbundle": 0, 
     "subcategory": "Cat1", 
     "taxincluded": 0, 
     "brand": "erer", 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1_thumb.png" 
    }, 
    { 
     "productid": "2", 
     "price": "13.65", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "yancı", 
     "isbundle": 0, 
     "subcategory": "Cat2", 
     "taxincluded": 0, 
     "brand": "erer" 
    } 
]

這裏是我的代碼：

<!DOCTYPE html> 
    <html> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <body> 
    <body ng-app="MyApp"> 
     <div ng-controller="PostsCtrl"> 
     <ul ng-repeat="post in posts"> 
      <li>{{post.fullsizeurl}}</li> 
     </ul> 
     </div> 
    <script> 
    var app = angular.module("MyApp", []); 

    app.controller("PostsCtrl", function($scope, $http) { 
     $http.get('http://85.96.243.31/admin.productss/searchwithjson'). 
     success(function(data, status, headers, config) { 
      $scope.posts = data; 
     }). 
     error(function(data, status, headers, config) { 
      // log error 
     }); 
    }); 
    </script> 
    </body> 
    </html>

我無法得到的產品fullsizeurls。這段代碼有什麼問題？

來源

2015-05-11 GaripTipici

你正在運行腳本後ng-repeat ...也許多數民衆贊成在問題 – Altoyyr

請檢查控制檯的錯誤...我瘋狂的猜測是：違反SOP – devnull69

您是否啓用服務JSON的計算機上的CORS？ – Jack

我試過你的代碼，發現問題在於違反了從不同域拉取數據的規則。

你確定你從正在執行html的相同域名拉取JSON文件嗎？ - 我已經嘗試抓取您的JSON文件並使用.html文件進行存儲，並在相同的文件夾中完美地運行它。

如果您未能做到，將在控制檯日誌中遇到以下錯誤： XMLHttpRequest無法加載http://localhost/searchwithjson。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。

或者正如其他人建議啓用CROS（跨源資源共享）能夠從不同位置加載JSON。

來源

2015-05-11 12:21:17 sumone

我檢查了控制檯，並且出現一個錯誤「XMLHttpRequest無法加載http：//localhost/admin.productss/searchwithjson。請求的資源上沒有'Access-Control-Allow-Origin'標頭Origin'http：//85.96因此不允許訪問.243.31'。「所以你是對的。我如何允許加載json？ – GaripTipici

取決於什麼是適合您的解決方案。如果您爲自己測試此腳本，則可以通過Chrome中的插件（https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi）或其他瀏覽器的類似方法來允許CROS。但是，我相信不能完成申請所有訪問者的事情。所以唯一真正的解決方案是在相同的域名下執行.html，或者從後端的邏輯中拉出JSON，然後將其分發給訪問者。 – sumone

忘了提及還有第三種解決方案，其中如果您有權訪問JSON文件所在的服務器。在獲取JSON時，您可以在響應下的Access-Control-Allow-Origin中指定您的網站URL。這樣，當瀏覽器從JSON所在的服務器獲得響應時，瀏覽器會識別您的網站URL，其中.html文件位於哪裏，如果這兩個匹配項能夠正常工作。 User @apsillers在他的帖子中很好地描述了這裏：http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work?answertab=active#tab-top – sumone

將JSON加載到角度

回答

相關問題