2

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.

Improve this question
3
  • Why are you using an ng-repeat if you only want to display one? 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? 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>? Commented Mar 17, 2016 at 22:35

2 Answers 2

Reset to default
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>

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

7 Comments

Nice one, but since I am passing this from a file, what should I change to achieve this?
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.
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?
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.
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...
|
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

Improve this answer

2 Comments

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.
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!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.