Hello, I am currently learning about Angular.js and working on developing a shopping cart. In this project, I need to display an image, name, and cost of each product for multiple tenants. Each tenant has an array called listOfBinaries which contains listOfMerchandise. My issue is that I need to show the name from the tenants, the image from listOfBinary, and the cost from listOfMerchandise. After parsing the JSON data retrieved from an AJAX call to the REST URL, my page appears empty when running the application. Can someone please provide assistance? Below is the JSON data obtained after making the API call:
{
"_links": {
"search": {
"href": "http://localhost:8080/sportsrest/tenants/search"
}
},
"_embedded": {
// JSON data continues...
}
My directives.js file contains the following code snippet:
// Code snippet for Ajax call in directives.js file
// Getting the above JSON data from the API call
This is a snippet of my HTML page where I want to display the product details using Angular.js:
<!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>
If anyone can provide guidance on how to successfully display the product details on the HTML page using Angular.js, it would be greatly appreciated. Thank you in advance.