私はローカルのサーバで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>
ウェブブラウザまたは残りのクライアントから「/product.json」を直接リクエストした場合、結果としてどうなるでしょうか? –
lealceldeiro
@AsielLealCeldeiro:私が列挙した配列を取得します。 –