What is the best way to perform a keyword search in AngularJS?

My data consists of code:description pairs (e.g. cmsc100: Web Programming). I have a search box where users can enter either the code or description. Upon clicking the button, the program should display the data that matches the entered code/description or show "Nothing found" if it's not in the dataset.

The API has been verified to be accurate. However, I'm having trouble implementing it in Angular. Whenever I click the button, it keeps returning "0 results found".

This is my Controller:

//search by description
$scope.byDescription = function(){
    $http
        .get('http://localhost:3000/api/search-by-desc')
        .then(function(response){
            $scope.subjects = response.data;
            console.log(response);
        },
        function(response){
            console.log(response);
            $scope.subjects = 'Nothing found';
        });

        $scope.desc = "";
}

Answer №1

Parameter text is assigned to the variable.

JavaScript

$scope.byDescription = function(text){
    $http
        .get('http://localhost:3000/api/search-by-desc?q=' + text)
        .then(function(response){
            $scope.subjects = response.data;
            // Check the number of subjects received from the API with
            console.log(response.data.length);

        })
        .catch(function(response){
             // Redirect to error page 
              $location.path("/error");
        });
}

HTML

<input type="text" ng-model="temp.pattern" name="pattern"/>
<button type="button" ng-click="byDescription(temp.pattern)">Search</button>

Node.js

router.get("/", (req, res, next) => {
      var q = req.query.q;

      //Perform search operation here
}

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

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

Turning off the MaskedEditValidator and MaskedEditExtender

I have created a compact table that allows users to edit, delete, and add records: The table (DataGridView, bound) is user-friendly: click on "Edit" to enter the editing mode (which includes a "Cancel" option), update values, and then click "Add" to inser ...

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

Looping through data returned from Ajax call and displaying it as HTML in CodeIgniter using JQuery

Just dipping my toes into the world of JQuery AJAX, here's what I've got so far: $(document).ready(function() { $("#city").change(function() { var city_id = $("#city").val(); if (city_id != '') { $.ajax({ type ...

Experiencing problem with route and post request in my angular.js/express/node.js application

Below is the code for my Angular controller with a post request: $http.post('/formDevis', $scope.formData).then(function(response) { if (response.data) { $('#successModal').modal(); console.log(response); } }, function(resp ...

What is the best way to refresh updated .js files directly from the browser console?

Is it possible to use RequireJS 2 to dynamically reload a recently updated .js file? Let me explain my scenario: I have a Backbone.js object named Foo with a function called Bar that currently displays an alert with "abc" when called; In my webpage, I ex ...

Understanding how to decode querystring parameters within a Django view

In the application I'm working on, there is a search form that utilizes a jQuery autocomplete plugin. This plugin processes the querystring and sends back the suggested item using encodeURI(q). For example, an item like Johnny's sports displays ...

Assigning the style of the parent element based on the child element

Currently, I am attempting to develop a customized dropdown field and here is the code I have come up with: const list = document.querySelector('.list'); const listItems = list.getElementsByTagName('p'); document.querySelector('# ...

Retrieve the unique identifier of a single post from a JSON file within a NuxtJS project

Is there a way to retrieve the unique post id data from a JSON file in NuxtJS? created() { this.fetchProductData() }, methods: { fetchProductData() { const vueInstance = this this.$axios .get(`/json/products.json`) ...

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

$routeProvider is not redirecting to the specified path

I am attempting to modify the URL using $routeProvider in AngularJS. $routeProvider.when('/', { templateUrl : 'scripts/login/login.tpl.html', controller : 'LoginCtrl' }); $routeProvider ...

Express.js and Node version 0.10.29: The Mystery Post

Having trouble with sending JSON data to an express server and receiving 'undefined' for req.body.name. This is how the configuration is set up: const express = require('express'); const app = express(); app.configure(function(){ ...

Open a Link in the Default Browser with a Right Click in node-webkit

I'm using an iframe in my node-webkit app. I want users to have the ability to right-click on links within the iframe (a tags) and choose an option like "Open in Browser" to open the link in their default browser. Can this be done? ...

I encountered an unexpected obstacle while reloading my Next.js application with animejs. The error message reads: "SyntaxError: Unexpected token 'export'." This unwelcome occurrence took place during the

Encountering an error with animejs when reloading my Next.js app: An unexpected token 'export' is causing a SyntaxError. This issue occurred during the page generation process. The error originates from file:///Users/.../node_modules/animejs/lib ...

Tips for saving the file path locally using local storage in AngularJS

My attempt at using $localstorage to store the file path locally and preview it using an iframe is resulting in an error. $scope.getResume = function() { var resumeJson = { "json":{ "request":{ ...

Is it Better to Perform Manual Change Detection in AngularJS or Angular 2?

My issue involves working with a sizable data list where each element has a filter applied. In order to optimize performance due to potentially adding numerous attributes to each entry, I seek to update the list only when there is a change in the data (eve ...

Encountered an Error in Express.js: Unable to POST /users

I am currently in the process of learning the MEAN stack by following a tutorial and have encountered an error. Unfortunately, I am having difficulty identifying exactly where I went wrong. While attempting to test routes in Postman by creating a user, I ...

Perform an AJAX call from the main file after inserting data using AJAX beforehand

I am in need of assistance with a question I have. On a page, an AJAX function is executed after the page finishes loading, creating a table in PHP that contains two buttons: one for changing passwords and the other for deleting. This table is then injecte ...

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...