I am new to Angular.js. Here i am developing a shopping cart where i have to display image, name and cost of a product. I have multiple tenants and each tenant have array listOfBinaries which contains listOfMerchandise. Myproblem is i have to show name from tenants, image from listOfBinary and cost from listOfMerchandise. I parsed the JSON as shown below but while running i am getting empty page. Can any one please help me. Here is my JSON which i got after making an AJAX call to the REST URL:
{
"_links": {
"search": {
"href": "http://localhost:8080/sportsrest/tenants/search"
}
},
"_embedded": {
"tenants": [
{
"name": "tenant1",
"domainName": "gaming.com",
"description": "sasasa",
"listOfBinary": [
{
"imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
"username": "Sumanth",
"description": "imagSky Sports offer free live Premier League action on o Sky Sports offer free live Premier League action on opening weekend of season as battle witpening weekend of season as battle wite1",
"listOfMerchandise": [
{
"rate": 100,
"type": "item1",
"shortDescription": "test1"
}
]
},
{
"imageURL": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
"username": "as",
"description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
"listOfMerchandise": [
{
"rate": 200,
"type": "item2",
"shortDescription": "test2"
}
]
}
],
"merchandise": null,
"_links": {
"self": {
"href": "http://localhost:8080/sportsrest/tenants/2"
},
"listOfCustomerPackage": {
"href": "http://localhost:8080/sportsrest/tenants/2/listOfCustomerPackage"
}
}
},
{
"name": "tenant2",
"domainName": "cric.io",
"listOfBinary": [
{
"imageURL": "http://i.telegraph.co.uk/multimedia/archive/02602/premier-league_2602603b.jpg",
"username": "Sumanth",
"description": "Sky Sports offer free live Premier League action on opening weekend of season as battle wit Sky Sports offer free live Premier League action on opening weekend of season as battle wit",
"listOfMerchandise": [
{
"rate": 500,
"type": "item5",
"shortDescription": "test5"
}
]
},
{
"imageURL": "www.test.com",
"username": "sumanth",
"description": "sample",
"listOfMerchandise": [
{
"rate": 2323,
"type": "type7",
"shortDescription": "test"
}
]
}
],
"merchandise": null,
"_links": {
"self": {
"href": "http://localhost:8080/sportsrest/tenants/9"
},
"listOfCustomerPackage": {
"href": "http://localhost:8080/sportsrest/tenants/9/listOfCustomerPackage"
}
}
},
{
"name": "tenant5",
"domainName": "test.co",
"description": "test 123 ",
"listOfBinary": [],
"binary": {
"fileLocation": "www.test.com",
"username": "sumanth",
"description": "sample",
"listOfMerchandise": [
{
"rate": 2323,
"type": "trt",
"shortDescription": "rtrtrt"
}
]
}
}
]
}
}
My directives.js file: I am getting above JSON when i make this Ajax call
myAppDirectives.
controller('items_display', function ($scope,$http) {
$http({ method: 'GET', url: 'http://localhost:8080/sportsrest/tenants/' }).success(function (data) {
$scope.carts=data;
}).
error(function (data) {
alert("error" + data);
console.log(data);
});
});
My HTML page:
<!DOCTYPE html>
< html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="items_display">
<div ng-repeat="item in carts._embedded.tenants">
<div type="text" class="item_name" value={{item.name}} >
<div ng-repeat="item in carts._embedded.tenants.listOfBinary">
<img class="shop_img" ng-src="{{item.fileLocation}}" ng-style="{'width':'100px', 'height':'100px'}" />
<div ng-repeat="item in carts._embedded.tenants.listOfBinary.listOfMerchandise">
<div type="text" class="item_cost" value={{item.rate}} >
</div>
</br>
</div>
</div>
</div>
</body>
Can anyone please help to to display the product details on html page using Angular.js.
Thanks in Advance
Your markup is all messed up, check the plunker I've made with your data and markup
http://plnkr.co/edit/jGCm6nO9S4hlNxLCyrSy?p=preview
<body>
<div ng-app="myApp">
<div ng-controller="items_display">
<div ng-repeat="tenant in carts._embedded.tenants">
<div type="text" class="item_name">{{tenant.name}}
<div ng-repeat="binary in tenant.listOfBinary">
<img class="shop_img" ng-src="{{binary.fileLocation}}" ng-style="{'width':'100px', 'height':'100px'}" />
<div ng-repeat="(key, value) in binary.listOfMerchandise[0]">
<div type="text" class="item_cost">{{key}}: {{value}}
</div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.