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
– JDurstberger, Commented May 11, 2015 at 12:13
Please check the console for errors ... my wild guess is: Violation of SOP — devnull69
– devnull69, Commented May 11, 2015 at 12:16

sumone · Accepted Answer · 2015-05-11 12:29:33Z

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, 2015 at 12:29

answered May 11, 2015 at 12:21

sumone

4084 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GaripTipici Over a year ago

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

sumone Over a year ago

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 (chrome.google.com/webstore/detail/allow-control-allow-origi/…) 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 Over a year ago

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: stackoverflow.com/questions/10636611/…

Collectives™ on Stack Overflow

Load JSON into Angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related