Jaskaran Singh Puri Jaskaran Singh Puri - 2 months ago 6
AngularJS Question

AngularJS filter data based on JSON records

I have a JSON file and want to print

<divs>
based upon address of resturants but I want to group them based upon the 'r.Address' field. Like all records with 'Address' Delhi should show first followed by all records of 'Chandigarh' and so on. How can I do this?

Following is some 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> &nbsp;{{ 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> &nbsp;{{ r.Type }}</td>
<td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> &nbsp;{{ r.Hours }}</td>
</tr>
</table>
</div>
</a>


This is 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 the output I want 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>

Answer

I have changed a bit in your code. please try this.

JSON

  $scope.Restaurents =  {
  "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"
    }
  ]
}

Html

<a href="#" ng-repeat="r in Restaurents.records | orderBy:'Address'" 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> &nbsp;{{ 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> &nbsp;{{ r.Type }}</td>
                            <td><span class="glyphicon glyphicon-time" aria-hidden="true"></span> &nbsp;{{ r.Hours }}</td>
                        </tr>
                    </table>
                </div>
            </a>

Hope it will help. also you can group json array while processing in controller side.

Comments