I have a JSON file containing restaurant information and I need to display the data by grouping them based on their respective address fields. For example, all restaurants with the address 'Delhi' should be shown first, followed by those from 'Chandigarh', and so on. How can I achieve this?
Below is a snippet of my code:
<a href="#" ng-repeat="r in resturant" id="rest-list-f" class="offVal">
<div class="col-md-6 col-centered form-planner-inner">
<span class="form-text">{{ r.Name }}</span><br>
<address><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> {{ r.Address }}</address>
<img class="img-responsive" src="{{ r.Image }}" alt="{{ r.Name }} Image"><br>
<hr/>
<table class="eventActive">
<caption><strong><center><a href="#">Click To Read Reviews</a></center></strong></caption>
<tr>
<td><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> {{ r.Type }}</td>
<td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> {{ r.Hours }}</td>
</tr>
</table>
</div>
</a>
This is a snippet of my JSON Code:
{
"records": [
{
"Name": "Sagar Ratna",
"Image": "./images/sr.jpg",
"Address": "Mohali",
"Type": "South Indian",
"Hours" : "10:00-23:30"
},
{
"Name": "The Night Factory",
"Image": "./images/nf.jpg",
"Address": "Chandigarh",
"Type": "Chinese",
"Hours" : "24/7"
},
{
"Name": "Whistling Duck",
"Image": "./images/ed.jpg",
"Address": "Rajpura",
"Type": "Chinese",
"Hours" : "11:30-23:30"
},
{
"Name": "Uncle Jack's",
"Image": "./images/uj.jpg",
"Address": "Mohali",
"Type": "Pizza",
"Hours" : "10:00-22:30"
},
{
"Name": "Corner Griller",
"Image": "./images/cg.jpg",
"Address": "Rajpura",
"Type": "North Indian",
"Hours" : "11:00-23:30"
}, {
"Name": "Starbucks",
"Image": ./images/st.jpg",
"Address": "Delhi",
"Type": "Coffee",
"Hours" : "24/7"
}
]
}
This is how I want the output to look like :
<div> Restaurant Name, Address: Delhi </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Mohali </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Rajpura </div>
<div> Restaurant Name, Address: Chandigarh </div>