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?

javascriptangularjs

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 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';
    }
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

Parsing URLs with Node.js

Currently, I am attempting to parse the URL within a Node.js environment. However, I am encountering issues with receiving null values from the following code. While the path value is being received successfully, the host and protocol values are returnin ...

javascriptnode.jsexpress

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

Although I've never ventured into the realm of Typescript before, I am intrigued by its concept of "stricter JS". My knowledge on the subject is currently very limited as I am just starting to experiment with it. Essentially, I have developed my own ...

javascripttypescript

What are the best ways to enhance performance when making multiple require() calls?

I am in the process of developing a bot for my company's Mattermost server (similar to a Discord bot). Each command for the bot is housed in its own file, making it easier to manage and maintain. When a user wants to execute a command, they must send ...

javascriptnode.jsmattermost

Is there a way to efficiently process multipart/formdata, application/json, and text/plain within a single Express handler?

Operating an express demo server that mirrors the client's POST requests back to it is a part of an educational practice. In this exercise, the client makes a POST request using the fetch API, like so: fetch('http://localhost:5000/', { m ...

javascriptnode.jsexpress

Ways to retrieve property value from a component in Vue.js 2.0

I am currently working with a specific component that allows for date selection: <template> <div class="animated fadeIn"> <div class="col-sm-6 col-lg-6"> <datepicker class="form-control" :value="config.state.fromDate" ...

javascriptvue.jsvue-component

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

javascriptreactjsnext.jsaudioredux

I keep encountering an error with the Next.js Image component, even though I have properly included the src prop

By passing the src prop to the UserCard component, I am encountering the following error message. Error Unhandled Runtime Error Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` comp ...

javascriptreactjsnext.jsnextjs-image

Restrict the number of dynamic form elements to a maximum of 10 entries

I am working on a feature where users can refer their friends and the data will be saved in a database. <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' sr ...

javascriptphpjqueryhtml

Find all strings in the array that do not begin with a letter from the alphabet

When a specific button is clicked, I need to filter the example array provided in the snippet below. The expected output should only include elements that do not start with an alphabet. I attempted: const example = ["test", 'xyz', '1 test& ...

javascriptarraysreactjsstringfilter

Is it better to deploy a JS app to the browser, or should I consider using nw.js

Is there a tool available for developing a javascript application that can be deployed as either a browser-based or native app using nwjs or Atom Electron? It should only utilize browser-compatible features and not node's native features. Maybe th ...

javascriptnode.jselectronnw.js

Having trouble resolving a missing dependency warning with the useEffect React Hook in my Next.js app. Any tips on how to fix this

Currently, I'm facing the following warning: Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array Here is the code snippet from _app.js that seems to be causing this issue: cons ...

javascriptreactjsnext.js

What is the best way to interact with the member variables and methods within the VideoJs function in an Angular 2 project

Having an issue with accessing values and methods in the videojs plugin within my Angular project. When the component initializes, the values are showing as undefined. I've tried calling the videojs method in ngAfterViewInit as well, but still not get ...

javascriptangulartypescriptvideo.js

"The issue seems to stem from a snippet of compact JavaScript

I am facing an issue with a list item that contains both an image and text. The text is overlapping the image, but when I hover over the text, it disappears and only the picture is visible. Here is the HTML code snippet: <ul> <li><img ...

javascriptjquerythis

"An error occurred with the Ajax post request - bad request

I've encountered a strange issue while attempting to make a POST request using AJAX with the code snippet below: $('.login-form').on('submit', function(e) { e.preventDefault(); $.ajax({ type: "post", url: " ...

javascriptjqueryjsonajaxpost

Unexpected lag causing delays in jQuery animations

I am attempting to implement a "hover" effect using jQuery. Everything seems to be working fine, except for a strange delay that occurs only the first time the complete callback is triggered - oddly enough, this is the only instance where it reaches the pr ...

javascriptjqueryanimation

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

javascriptreactjsnext.jsaxiosfetch-api

The Ajax GIF Loader is not functioning in the latest versions of Internet Explorer and Firefox, but it is running smoothly in

The animated GIF loader functions correctly in the latest version of Chrome, but does not animate when viewed in IE and Firefox. Below is the code snippet: $("#DIALOG").dialog({ buttons : { "Yes" : function() { ...

javascriptjqueryajaxfirefox

Manipulating Object Properties in the Browser's Console

When I log a JavaScript object in the browser, my curiosity leads me to expand it in the console window. An example of this is: console.log(console); I discover what's inside, but then a thought crosses my mind. When I dig deeper and expand the obje ...

javascriptjsonbrowser-console

What are the steps to implementing partial page functionality with the $http service in Angular?

Could someone assist me with executing an operation once a partial page has been successfully loaded using the $http service in Angular? The operation involves checking a checkbox based on the scope value. I have included the source code below: Here i ...

javascriptjqueryangularjsangularjs-scope