2017-01-16 9 views
0

私はローカルのサーバでjsonファイルを取得しようとしています。私は、コードは以下のように動作するために$ HTTPサービスを使用することによって、これを達成しようとしています:jsonファイルをangularjsにフェッチする

(function(){ 
    var app = angular.module('store', ['store-products']); 
    app.controller('StoreController',['$http', function($http){ 
     var store = this; 
     store.products = []; 
     $http.get('products.json').success(function(data){ 
      store.products = data; 
     }) 
})(); 

そして、私のproducts.jsonファイル:

[ { 
    "name" : "Lasagna", 
    "price" : 250, 
    "images":[{"full":"images/lasagne.jpg"}], 
    "Description":"Lasagne are wide, flat-shaped pasta, and possibly one of the oldest types of pasta.The word 'lasagne', and, in many non-Italian languages, the singular 'lasagna', can also refer to a dish made with several layers of lasagne sheets alternated with sauces and various other ingredients.", 
    "canPurchase": true, 
    "Reviews":[] 

      }, 
      { 
    "name":"Shawarma", 
    "price":300, 
    "images":[{"full":"images/shawarma.jpg"}], 
    "Description":"Shawarma or Shawurma is a Levantine meat preparation, where lamb, chicken, turkey, beef, veal, buffalo meat, or mixed meats are placed on a spit (commonly a vertical spit in restaurants), and may be grilled for as long as a day.Shavings are cut off the block of meat for serving, and the remainder of the block of meat is kept heated on the rotating spit. Shawarma can be served on a plate (generally with accompaniments), or as a sandwich or wrap. Shawarma is usually eaten with tabbouleh, fattoush, taboon bread, tomato, and cucumber. Toppings include tahini, hummus, pickled turnips, and amba", 
    "canPurchase": true, 
    "Reviews":[] 
    }] 

そして、私のhtmlコード:

<!doctype html> 
<html ng-app="store"> 
<head> 
    <link rel="stylesheet" href="styles/bootstrap.min.css"> 
</head> 
<body ng-controller="StoreController as store"> 
    <h1 align="center"><ul>Food Junkie</ul></h1> 
    <h2 align="center">-It's all gonna be alright-</h2> 
    <ul class="list-group"> 
     <li class="list-group-item" ng-repeat ="product in store.products"> 
      <product-title></product-title> 
      <product-images></product-images> 
      <button ng-show="product.canPurchase"><img src="images/cart_64x64.jpg"/></button></br> 
      <product-panel></product-panel> 
     </li> 
    </ul> 

    <script type="text/javascript" src="scripts/angular.min.js"></script> 
    <script type="text/javascript" src="scripts/ang.js"></script> 
</body> 
</html> 
+0

ウェブブラウザまたは残りのクライアントから「/product.json」を直接リクエストした場合、結果としてどうなるでしょうか? – lealceldeiro

+0

@AsielLealCeldeiro:私が列挙した配列を取得します。 –

答えて

0

あなたはそれにアクセスできますが、あなたのURLは間違っています。 JSONファイルがルートにある場合だけで、それ以外の場合はダッシュ/で始まらない、すなわち$http.get('product.json')を使用します。最新バージョンは.then().catch()ため$http.success().error()を置き換えるため、$http.get('path/to/product.json')

はあまりにもあなたの角度バージョンの点に注意してください。

+0

ええ、私はバックスラッシュを削除しようとしましたが、何も変わっていません。使用しているangularjsのミニバージョンはローカルサーバー(CDNではありません)に保存されています。 –

+0

どのようなエラーが表示されますか? 404?あなたがjsonに奉仕しているなら、あなたは相対的ではなく絶対的な道で試してみましたか? – Hiraqui

+0

はい、私は.jsonファイルへのパスを与えるときに配列を取得していますが、私のjsファイルで言及したパスはファイル名であるため、ルートフォルダにあります。 –

関連する問題