Utilize AngularJS to refine and sort through data retrieved from an API

Question

Utilize AngularJS to refine and sort through data retrieved from an API

I have an Angular application that is fetching hotel data from an API. I want to filter the results based on the minimum price of the hotels being less than $50.

$http.get($rootScope.baseurl + 'api/hotels/', {
        params: {
            page_size: $scope.page_size,
            page: $scope.page,
            goingTo: goingTo,
            ordering: $scope.sortBy,
            star: $scope.filter.star,
            min_price: ????
        }}).then(
        function(data, status, headers, config) {
            $scope.Hotels = data.data.results;
            $scope.count = data.data.count;
            $scope.loading = false;
            PageService.setContentReady();
        },
        function(data, status, headers, config) {
            $scope.loading = false;
            PageService.contentStatus = 'ready';
        }
    );

How can I display hotels with prices under $50?

javascript angularjs

Answer 1

Answer №1

Here is a suggestion to enhance your code:

// If you are working with promises;
let deferred = $q.defer();

.success((data) => {
  deferred.resolve(data);
});

You can then filter the resulting data like this:

// Assuming 'data' represents the resolved data;
let filteredData = data.filter((hotel) => hotel.min_price < 50);

Although it's written in ES6, it should give you an idea of what needs to be done.

Answer 2

Here is a suggestion to enhance your code:

// If you are working with promises;
let deferred = $q.defer();

.success((data) => {
  deferred.resolve(data);
});

You can then filter the resulting data like this:

// Assuming 'data' represents the resolved data;
let filteredData = data.filter((hotel) => hotel.min_price < 50);

Although it's written in ES6, it should give you an idea of what needs to be done.

Answer 3

Answer №2

Here is the updated version of your code:

$http.get($rootScope.baseurl + 'api/hotels/', {
    params: {
        page_size: $scope.page_size,
        page: $scope.page,
        goingTo: goingTo,
        ordering: $scope.sortBy,
        star: $scope.filter.star,
        min_price: 50
    }
}).then(
    function(data, status, headers, config) {
        $scope.Hotels = data.data.results;
        $scope.Hotels = $scope.Hotels.filter(function(hotel){ return hotel.min_price < 50}); //filter hotels
        $scope.count = data.data.count;
        $scope.loading = false;
        PageService.setContentReady();
    },
    function(data, status, headers, config) {
        $scope.loading = false;
        PageService.contentStatus = 'ready';
    }
);

Answer 4

Here is the updated version of your code:

$http.get($rootScope.baseurl + 'api/hotels/', {
    params: {
        page_size: $scope.page_size,
        page: $scope.page,
        goingTo: goingTo,
        ordering: $scope.sortBy,
        star: $scope.filter.star,
        min_price: 50
    }
}).then(
    function(data, status, headers, config) {
        $scope.Hotels = data.data.results;
        $scope.Hotels = $scope.Hotels.filter(function(hotel){ return hotel.min_price < 50}); //filter hotels
        $scope.count = data.data.count;
        $scope.loading = false;
        PageService.setContentReady();
    },
    function(data, status, headers, config) {
        $scope.loading = false;
        PageService.contentStatus = 'ready';
    }
);

Utilize AngularJS to refine and sort through data retrieved from an API

Answer №1

Answer №2

Similar questions

Append a constant string to the conclusion of the route parameter

Tips for configuring jQtree to initially display the tree structure from the HTML source

Error encountered in MVC 5: When using jQuery to assign a value to an object, the

Collect all the attribute values of the checkboxes that have been checked and convert them

Retrieving the specific value of an input from a group of inputs sharing a common class

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

Managing code requiring document.title in Next.js with Static Site Generation (SSG)

How can information be seamlessly transferred between two HTML pages using a script?

Unable to make a jQuery Ajax HTTP Request within a Chrome extension

The pinFileToIPFS method in Pinata IPFS is currently unable to accept files uploaded by users

What is the best way to insert images into a database?

Choosing between cjs and esm for a React components library

Struggling to develop a Singleton AngularJS Service?

Saving components locally (vue2)

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

Steps for displaying a post's image when hovering over its link in WordPress

Is it possible to have two unique keys in a single MongoDB schema?

Unable to reach the array file

Is there a way to ensure that the ng-repeat finishes before the parent directive is executed?

Extra spaces within the source code visible after the page has been processed by Angular