Why are the characters of my $resource.query value being sent as separate parameters in Angular?

When using the $resource .query method in my Angular.js app to send a query, I am encountering an issue where the characters of the query string are being submitted as separate parameters. Why is this happening?

Below is the unexpected result:

cities?0=n&1=e&2=w&3=y&4=o&country_code=US

Here is the relevant code snippet:

// Defines Cities service with REST endpoint
angular.module('mean.cities').factory("Cities", ['$resource', function($resource) {
    return $resource('cities/:query', {
        query:'@query',
        country_code: 'US'
    }, 
    {});
}]);


// Controller Method for autocompleting cities
$scope.autocompleteCity = function(query) {
        Cities.query($scope.query, function(cities) {
            console.log(cities);
        });
};

// UI Element for city autocomplete input
<input auto-complete ui-items="names" ng-model="query" class="form-control input-lg" placeholder="Enter A Town" ng-change="autocompleteCity()">

Answer №1

ngResource's static functions require the first parameter to be an object.

Example code:

Cities.search({term: $scope.searchTerm}, function(results) {
  // Sends a GET request to /cities/new-york?country_code=US based on the search term "new-york"
  console.log(results);
});

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

Having trouble with the ajax cache not working properly when trying to load an image

I am attempting to dynamically load an image from the server every time a button is clicked using a GET request. However, I am facing an issue where the cached image is being loaded instead of the latest version. Below is the code I am currently using: & ...

Tips for Uploading Files with SpringMVC and MockMVC: A Guide to Posting multipart/form-data

I have successfully developed a photo uploader using javax.ws.rs to process image uploads. Here is the basic signature of the method: @POST @Path("/upload/photo") @Consumes("multipart/form-data") @Produces("application/json") public String uploadPhoto(Inp ...

observing gestures within angular

Is there a way to monitor changes in an ng-repeat expression? I have real-time data that I need to keep track of, and I'm looking for the best method to watch for any modifications. Perhaps a more specific inquiry would be how to watch a key within an ...

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

Combining text shapes in Three.js without losing their distinct material colors

Currently experimenting with merging text geometries in Three.js (r84) and looking to achieve this using multiMaterial while preserving individual colors for each text object. Check out the live demo here: https://jsfiddle.net/5oydk6nL/ Appreciate any ins ...

The code is functioning properly and executing without issues, yet I am puzzled as to why an error message is appearing in the console stating "Uncaught TypeError: Cannot read properties of null (reading 'style')"

Hey there, I'm new to the world of JavaScript and trying my hand at creating multiple modals that pop up. Everything seems to be working fine when opening and closing each modal, but I keep encountering an error message in the console (Uncaught TypeEr ...

how to implement dynamic water fill effects using SVG in an Angular application

Take a look at the code snippet here HTML TypeScript data = [ { name: 'server1', humidity: '50.9' }, { name: 'server2', humidity: '52.9', }, { name: 'server3', humidity: ...

Firebase could not be found in the firebase-web.js file

After setting up Angular Firebase with node.js, I encountered an issue where the firebase-web.js file is missing. Despite my attempts to locate it, I have been unsuccessful. Has anyone else experienced this problem and found a solution? ...

Obtaining the sub-domain on a Next.js page

Looking at my pages/index.tsx file in Next.js, the code structure is as follows: import { ApolloProvider } from "@apollo/react-hooks" import Client from "../db" import Header from "../components/Header" export default function Index() { return <A ...

What is the best way to effectively apply chunking and batching when working with a group of promises or async functions?

When processing a large collection of async functions in batches, I am presented with two different scenarios: Scenario 1: Gathering all the async functions import { chunk } from "lodash"; const func = async () => new Promise((resolve) =& ...

Implementing dynamic ng-forms with real-time validation

My directive includes a template with an ng-form: <ng-form name="autocompleteForm"> <div class="form-group" show-errors> <input type="text" class="form-control" ng-model="ctrl.val.value" name="autocompleteField" required> < ...

Exploring the power of Jasmine with multiple spy functionalities

I'm currently working on writing unit tests for an Angular application using Jasmine, specifically focusing on testing different scenarios within a function. The main challenge I am facing is structuring the test to accommodate various conditions such ...

What is the best way to add a blob to the document object model (

I am a beginner when it comes to working with blobs, and I am looking for some guidance to avoid wasting hours on unsuccessful brute-force attempts. I have been using the PHP code below (sourced from here) to retrieve the base64-encoded image from my data ...

Navigating to an element using Selenium and controlling Firefox with Node.js

Seeking guidance on how to scroll to and click a link element on the page. The current solution works for Chrome and IE, but Firefox gives an error. Any suggestions on fixing this or alternative approaches? function clickByLinkTextScroll(text){ d ...

Updating data in a table upon submission of a form in Rails

In my Rails 3.2 application, I am displaying a table of results using the @jobs variable passed to the view from a SQL query. I want to add a button that will trigger a controller action when clicked. The action should perform some database operations and ...

How can I deselect the 'select-all' checkbox when any of the child checkboxes are unchecked?

Here is the code provided where clicking on the select-all checkbox will check or uncheck all child checkboxes. If any child checkbox is deselected, the 'select-all' checkbox should also be unchecked. How can this be achieved? $(document).read ...

The useSelector value remains undefined within the handleSubmit button in a React component

Once a user fills out and submits the form, the action is triggered to call the API. Upon returning the postId, it is stored in the reducer. The main React component then utilizes useSelector to retrieve the latest state for the postId. However, when attem ...

Is there a solution for the issue of a background image loading full-size before being resized in Javascript?

I am currently working on a project where an image is dynamically resized to fit the window using javascript. However, there is an issue where the full-size image is loaded before resizing it, causing a noticeable jump from full-size to resized version. Is ...

Executing a Jquery AJAX request to generate an authorization code

For my project requirement, I need to generate an authorization code by making a call to the O365 URL using jQuery's AJAX function. The script below is being triggered from the document ready() event. $.ajax({ ...

Obtain the key for a newly added element

I am working with a service that contains the following function: this.addSubject = function(categId, data){ $firebase(url.child('discussions').child(categId)).$push(data).then(function (newChildRef) { console.log("added record with id " + ...