Having trouble displaying the filtered item when using the limitTo function in conjunction with ng-show and ng-repeat

Question

Having trouble displaying the filtered item when using the limitTo function in conjunction with ng-show and ng-repeat

I have a collection of well-known locations, each location includes a tour array with 20 elements - representing the number of tours available at that particular location. For example, 'Egypt' has 20 tours showcasing its various attractions. However, some tours do not include any accommodation options, while others do.

<div ng-repeat="tour in place.tours | limitTo:3" ng-show="tour.hotels.length != 0">
  <li>
    <a ng-repeat="hName in tour.hotels"> {{hName.name}}
    </a>
  </li>
 </div>

In the first ng-repeat, I only display tours that have a hotel available (with 1 hotel) using ng-show. In the second ng-repeat, I list out the names of hotels from the hotels array.

Ultimately, I extract all hotel names from tours that offer accommodations by using these two ng-repeat.

While everything is functioning as intended, I now want to display only the first 3 hotel names from the list obtained in the second ng-repeat. Adding limitTo:3 in the first ng-repeat does not show the first 3 hotel names because those elements are already hidden if no hotel is present, although the indexes persist!

I came across a related discussion on this topic but it didn't provide a solution Using ng-repeat and limitTo to limit the number of visible items displayed

How can I specifically showcase only the first 3 hotel names from the filtered list of hotels? What am I overlooking in my approach?

javascript angularjs

Answer 1

Answer №1

Try this code snippet to filter tours based on the number of hotels:

<!doctype html>
<html lang="en>
<head>
  <meta charset="UTF-8">
  <title>Example - hotel-filter-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="">
  <div ng-init="tours = [
    {name:'A', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'B', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'D', hotels:[{name:'AA'}]},
    {name:'E', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'F', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'G', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'NONEA'},
    {name:'NONEB'}
    ]"></div>
    <div ng-repeat="tour in tours | filter: { hotels: []}">
    Tour name : {{tour.name}} {{tour.hotels.length}} <br>
    <div ng-repeat="hotel in tour.hotels">
      Hotel Name : {{hotel.name}}
      <br/>
    </div>
    <br>
  </div>
</html>

Check out the live demo here.

Answer 2

Try this code snippet to filter tours based on the number of hotels:

<!doctype html>
<html lang="en>
<head>
  <meta charset="UTF-8">
  <title>Example - hotel-filter-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="">
  <div ng-init="tours = [
    {name:'A', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'B', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'D', hotels:[{name:'AA'}]},
    {name:'E', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'F', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'G', hotels:[{name:'AA'},{name:'AB'}]},
    {name:'NONEA'},
    {name:'NONEB'}
    ]"></div>
    <div ng-repeat="tour in tours | filter: { hotels: []}">
    Tour name : {{tour.name}} {{tour.hotels.length}} <br>
    <div ng-repeat="hotel in tour.hotels">
      Hotel Name : {{hotel.name}}
      <br/>
    </div>
    <br>
  </div>
</html>

Check out the live demo here.

Answer 3

Answer №2

To achieve the desired outcome, it is important to apply a custom filter first before setting any limitations.

JS

  $scope.filterFn = function(tour)
    {
        // Implement necessary checks

        if(tour.hotels.length > 0)
        {
            return true; // Include in results
        }

        return false; // Exclude from results
    };

HTML

<div ng-repeat="tour in place.tours | filter:filterFn | limitTo:3">

Answer 4

To achieve the desired outcome, it is important to apply a custom filter first before setting any limitations.

JS

  $scope.filterFn = function(tour)
    {
        // Implement necessary checks

        if(tour.hotels.length > 0)
        {
            return true; // Include in results
        }

        return false; // Exclude from results
    };

HTML

<div ng-repeat="tour in place.tours | filter:filterFn | limitTo:3">

Answer 5

Answer №3

It seems like there might be some confusion in your question, but if you're looking to display the initial 3 hotels for EVERY tour, consider using the limitTo filter within the second ng-repeat loop.

Answer 6

It seems like there might be some confusion in your question, but if you're looking to display the initial 3 hotels for EVERY tour, consider using the limitTo filter within the second ng-repeat loop.

Having trouble displaying the filtered item when using the limitTo function in conjunction with ng-show and ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with a JQuery ajax post to a PHP server - receiving the error message "SyntaxError: Unexpected token < in JSON at position 0"

Turning plain text into functional HTML using React.js

The second instance of a React Paginate on the same page remains static and does not trigger a

Guide on transforming an array into a collection of objects

CSS styling does not apply to HTML elements that are dynamically created using JavaScript

Is there a way for me to obtain a selection of 20 random items from this JSON data

Order child property in AngularJSWe are sorting properties in

Having trouble accessing a custom factory within a directive in Angular using TypeScript

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

Transforming an array into an object by applying filtering, prioritization, and minimizing loops

What are some strategies to avoid triggering onBlur events for sibling or related components?

What is the best way to access and retrieve URL parameters within AngularJS?

Converting canvas illustrations into HTML files

Tips for creating gaps between list items in a collapsible navbar

Each time a new client connects, socket.io replicates the information

Adding Gridster to a WordPress theme

Is it possible to implement a custom sign-in form for AWS Cognito?

Why does jQuery.get() keep altering the URL I'm using?

Incorporate user input into Alert Dialog Boxes

The application is functional, however, the initial controller within is experiencing difficulties