Load JSON into Angular

Question

I am new with Angular.js. I try to get json from my local url http://85.96.243.31/admin.productss/searchwithjson. JSON content is:

[
    {
        "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"
    }
]

Here is my code:

<!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>

I couldn't get the fullsizeurls of products. What is the wrong with this code ?

You are running the script after your ng-repeat... Maybe thats the Problem — JDurstberger, May 11 '15 at 12:13
Please check the console for errors ... my wild guess is: Violation of SOP — devnull69, May 11 '15 at 12:16

sumone · Accepted Answer · 2015-05-11T12:29:33.437

4

I've tried your code and found out that the problem is in violating the rules of pulling data from different domain.

Are you sure you're pulling the JSON file from the same domain name where the html is being executed? - I've tried fetching your JSON file and storing with .html file and ran it perfectly fine from within the same folder.

If you fail to do, you'll be greeted with the following error in console log: XMLHttpRequest cannot load http://localhost/searchwithjson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Or as others suggest enable CROS (Cross-origin resource sharing) to be able to load JSON from different locations.

edited May 11 '15 at 12:29

answered May 11 '15 at 12:21

sumone

408
4
12

I checked console and there is one error "XMLHttpRequest cannot load http://localhost/admin.productss/searchwithjson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://85.96.243.31' is therefore not allowed access." so you are right. How can I allow to load json ? – GaripTipici May 11 '15 at 12:56
1

Depends on what is the proper solution for you. If you're testing this script out for yourself you can allow CROS via plugin in Chrome (https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi) or similar approach for other browsers. Same thing however I believe can't be done to apply for all of your visitors. So the only real solution would be executing .html under the same domain name or pull the JSON from the logic in the backend and then distribute it to your visitors. – sumone May 11 '15 at 12:59
1

Forgot to mention that there is also a 3rd solution in which if you have an access to that server where JSON file is located. You could specify your website URL in Access-Control-Allow-Origin under response when fetching JSON. That way when your browser gets response from server where JSON is located, your browser recognizes your website URL where .html file is located and if those two matches it will work. User @apsillers describes this nicely in his post here: http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work?answertab=active#tab-top – sumone May 11 '15 at 13:12

Load JSON into Angular

1 Answers1