AngularJS showing value based on id

Question

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.

Why are you using an ng-repeat if you only want to display one? — dmeglio
– dmeglio, Commented Mar 17, 2016 at 22:24
Your question is not clear. Please update it. You want to show only 1 item based on what condition? — dpaul1994
– dpaul1994, Commented Mar 17, 2016 at 22:29
Your hotel object has an array of category, but not a categories property. Shouldn't your second ng-repeat be: <li ng-repeat="cat in hotel.category">{{cat.name}}</li>? — Lex
– Lex, Commented Mar 17, 2016 at 22:35

AWolf · Accepted Answer · 2016-03-17 22:39:30Z

3

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>

answered Mar 17, 2016 at 22:39

AWolf

9,0105 gold badges38 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Morpheus Over a year ago

Nice one, but since I am passing this from a file, what should I change to achieve this?

AWolf Over a year ago

You can get the data with an ajax request like in this updated fiddle. You need to host that file with a webserver to have it work. Then you could do something like $http.get('http://localhost/hotels.json').then(...) or create a backend route that's returning the json file for you.

Morpheus Over a year ago

I get the error for undefined hotelService. This is my structure: plnkr.co/edit/ZRhDrYdTJYMcfkq3K4WD?p=preview I get error in console Error: hotelService is not defined What should I change?

AWolf Over a year ago

Here is an updated fiddle. Changed filter to a service and updated angular src. You had Angular 1.0.x and that doesn't support controllerAs syntax.

Morpheus Over a year ago

Thank you. Not sure why am I getting now Error: json[0] is undefined but I guess I have spelling mistake somewhere.... Even after double checking, I am still not able to see it...

|

James Nguyen · Accepted Answer · 2016-03-17 22:32:17Z

1

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

answered Mar 17, 2016 at 22:32

James Nguyen

4581 gold badge4 silver badges7 bronze badges

2 Comments

Morpheus Over a year ago

Thank you, can you also tell me how can I add that switch for example, I have 2 buttons and data is showed by pressing one of them, so when button 1 is pressed, data for hotel 1 is showed, when button 2 is pressed data for hotel 2 is showed.

James Nguyen Over a year ago

It would still work if you apply ng-if on the hotel list repeat <li ng-repeat="hotel in list.hotels" ng-if="condition"> so say you bind a ng-click on the button which with change the condition from "show data1" to "show data2", and $apply, it would behave as you wish Cheer!

Collectives™ on Stack Overflow

AngularJS showing value based on id

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related