将 JSON 加载到 Angular

Question

我是 Angular.js 的新手。我尝试从本地 url http://85.96.243.31/admin.productss/searchwithjson 获取 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>

我无法获得全尺寸url产品。这段代码有什么问题？

Answer 1

我试过你的代码，发现问题在于违反了从不同域提取数据的规则。

您确定要从执行 html 的同一域名中提取 JSON 文件吗？ - 我已经尝试获取您的 JSON 文件并与 .html 文件和运行一起存储在同一文件夹中，它完全没问题。

如果您不这样做，您将在控制台日志中看到以下错误： XMLHttpRequest 无法加载 http://localhost/searchwithjson。请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许访问来源 'null'。

或者按照其他人的建议启用 CROS（Cross-origin 资源共享）以便能够从不同位置加载 JSON。

将 JSON 加载到 Angular

Load JSON into Angular

javascript

json

angularjs

single-page-application