CODEWITHSUNDEEP
javascriptangularjsjson
Morpheus
Morpheus

Reputation: 997

AngularJS showing value based on id

How can I change data based on id that is passed from json file. JSON:

{
  "hotels": [
  {
     "id" : 1,
     "name": "some hotel 1",
     "category" : [{
        "id" : 1,
        "hotel_id" : 1,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  },
   {
     "id" : 2,
     "name": "some hotel 2",
     "category" : [{
        "id" : 1,
        "hotel_id" : 2,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  }
  ]
}

in my html I have ng-repeat like:

<p>Hotel names</p>
    <ul>
        <li ng-repeat="hotel in list.hotels">

            {{hotel.name}}

            <ul class="thumbnails">
                <p>Category</p>
                <li ng-repeat="cat in hotel.category">
                    {{cat.name}}
                </li>
            </ul>
        </li>
    </ul>

So this will show all what I have in that json file and I'm trying to limit it to show only data for one hotel (I know that I can do it with something like {{hotel[0].name}}) but there must be better approach, and also how can I use some kind of a switch by pressing the button to show data from hotel with id 1 to hotel with id 2 in the same div and vice versa?

Thank you.

Upvotes: 2

Views: 1683

Answers (2)

AWolf
AWolf

Reputation: 8970

You could use ng-repeat to create the links to display the hotel based on the click like in the following demo or in this fiddle.

For the categories you can use another ng-repeat (not added in the demo).

angular.module('demoApp', [])
	.controller('mainController', MainController);
  
function MainController() {
	
  this.hotels = [
  {
     "id" : 1,
     "name": "some hotel 1",
     "category" : [{
        "id" : 1,
        "hotel_id" : 1,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  },
   {
     "id" : 2,
     "name": "some hotel 2",
     "category" : [{
        "id" : 1,
        "hotel_id" : 2,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  }
  ];
	this.selectedHotel = this.hotels[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
  
  <a href="#" ng-repeat="hotel in mainCtrl.hotels" ng-click="mainCtrl.selectedHotel = hotel">{{hotel.name}}</a>
  
  <div>
    Hotel name: {{mainCtrl.selectedHotel.name}}
    Category: {{mainCtrl.selectedHotel.category}}
  </div>
</div>

Upvotes: 3

James Nguyen
James Nguyen

Reputation: 458

To answer your question, notice ng-if added

<p>Hotel names</p>
<ul>
    <li ng-repeat="hotel in list.hotels">

        {{hotel.name}}

        <ul class="thumbnails">
            <p>Category</p>
            <li ng-repeat="cat in hotel.categories" ng-if="cat.id == yourid">
                {{cat.name}}
            </li>
        </ul>
    </li>
</ul>

You can change yourid by using the current controller. And as other people suggest, you shouldn't use ng-repeat if you want to display only one element

Upvotes: 1

Related Questions