"Using angularjs's $location.search method results in an empty object being

I am trying to retrieve my URL querystring in AngularJS using the $location service, similar to this example. My URL looks like this - 

http://someDomain.com/create/index.jsp?queryToken=123abc

However, in my directive:

vm.queryParam = $location.search();
$log.log('vm.queryParam', vm.queryParam); //{}
vm.details.query = vm.queryParam.queryToken;
$log.log('vm.queryToken', vm.details.query); //undefined

Although I can see the parameter(s) when logging the $location object, it seems that the search() method is not working as expected. Can anyone suggest the correct way to extract them?

Thank you.

javascriptangularjsquery-string

Answer №1

This solution has been tested and proven effective. Give it a try:

var app = angular.module('myApp', []);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
  })
}])
 app.controller('myCtrl', function($scope, $location) {
 $scope.myPeram = "pass some value in url ?myParam=123";
var query = $location.search();
    if(query.myParam)
    $scope.myPeram = query.myParam;
    
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>

</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<span ng-bind="myPeram"></span>


</div>
</body>
</html>

Answer №2

To enable the use of $location.search() in your Angular application, make sure to activate HTML5 mode for routing by including the following line within your route definitions: 

$locationProvider.html5Mode(true);

If you prefer a more universal solution that works regardless of the HTML5 mode setting, you can always access the search parameters using: 

$window.location.search

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

The npm package installation process encountered difficulties in accessing the Chart.Js library

Currently, I am in the process of developing a web application that tracks and logs hours spent on various skills or activities. The data is then presented to the user through a bar graph created using Chart.js. Initially, I was able to display a mock grap ...

javascriptnode.jsexpressnpmchart.js

Enhance the overall appearance of select elements across all components using Material UI's

I'm attempting to change the border color of my outlined select elements using the code below, but it's not working as expected. It seems that the border style is being inherited from the fieldset element. I've experimented with using MuiOut ...

javascriptreactjsmaterial-ui

What's the best approach to retrieve JSON data within an AngularJS controller?

https://jsonplaceholder.typicode.com/posts I need to retrieve information from this URL and showcase it on the browser. In my JavaScript code, I typically perform this task by utilizing XMLHttpRequest and parsing the received data with JSON.parse(respons ...

angularjsjsonangularjs-controller

`Creating a fluid MySQL table using JavaScript`

One of the challenges I'm facing involves working with a MySQL table that consists of 3 columns: MySQL db table +--+----+-------------+ |id|data|display_order| +--+----+-------------+ |0 |0 |2 | +--+----+-------------+ |1 |1 |1 ...

phpjavascripthtmlmysqldatabase

Automatically update a separate page upon adding new data in Laravel 5.8 using Ajax

I have been exploring different methods on how to automatically update another page or blade file when data is changed. Specifically, I want the data in my wintwo.blade.php to be refreshed whenever I click the Call Next button on my call.blade.php. User i ...

javascriptphpajaxlaravellaravel-5.8

Instructions for sending an array of integers as an argument from JavaScript to Python

I have a JavaScript function that extracts the values of multiple checkboxes and stores them in an array: var selectedValues = $('.item:checked').map(function(){return parseInt($(this).attr('name'));}).get(); My goal is to pass this a ...

javascriptjquerypythonajax

Having trouble constructing the Grand-Stack-Starter api because babel-node is not being recognized

As I endeavor to create the initial api for the Grand Stack Starter, I encounter difficulties every time I try to execute npm start: >nodemon --exec babel-node src/index.js [nodemon] 1.18.7 [nodemon] to restart at any time, enter `rs` [nodemon] watchi ...

javascriptnode.jsnpmbabeljsgrandstack

Delete the final comma in a JSON file using JavaScript so that it can be utilized by a Vue application

Using Axios in my Vue app, I am consuming a JSON file. The field "country" contains trailing commas which are creating issues. Here is the structure of the JSON: "country": "spain,france," .... "country": " ...

javascriptvue.jsvuejs2

Having trouble with my loop using Jquery's $.get method

Having an issue with Jquery mobile / JavaScript I'm struggling to properly loop through the different values of data in my "get" function, where it should be sending ...cmd=PC&data=06464ff ...cmd=PC&data=16464ff ...cmd=PC&data=26464ff ...

javascriptjqueryjquery-mobile

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

javascriptreactjsreact-proptypes

The occurrences of Swiper events fail to be activated

I am in the process of developing a gallery website that utilizes the Swiper JQuery plugin for slideshows and isotope for grid layout. Each individual item within the gallery has its own slider and corresponding isotope element. The Swiper gallery is in ...

javascriptjqueryfancyboxswiper.jsjquery-isotope

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Is my question clear? Here's an example to illustrate: let string = "Test text ab/c test Test t/est ### Test/ Test t/test Test test" I want to remove / only from the line that includes ###, like so: Test text ab/c test Test t/est ### Test T ...

javascripthtmlregexstring

Empower Your Applications: AngularJS with ocLazyLoad for Dynamic State Loading

application define(['angular', 'angular-ui-router', 'ocLazyLoad', 'config/common', 'layout/services/menuService'], function(angular) { 'use strict'; var $stateProviderRef = nul ...

angularjslazy-loading

Refresh the DATATABLE inside an AJAX call without reloading the entire page

I'm currently working with a table that utilizes the Datatable plugin. I have successfully implemented filtering and deletion functionality within the table. However, after deleting certain entries, I noticed an issue where the deleted item still app ...

javascriptjqueryajaxlaraveldatatables

Update the variable using Ajax after the content has loaded

I am struggling with the following code snippet: <?php $num=12; ?> <html> <head></head> <body> <div id="test"></div> <script type="text/javascript"> function fetchContent() { var ...

javascriptphpajaxvariablesload

Searching for values in an array using the $elemMatch operator in MongoDB 2.6 without the need for the $eq operator

Looking to retrieve all users with a specified objectId in an array. Here is the query I'm using: var query = { 'arrayOfIds': { $elemMatch: { $eq: id } }, }; This query functions well in mongodb 3.0. However, in mongodb 2.6, there isn& ...

javascriptnode.jsmongodb

How can I retrieve the data returned by an ajax call using jQuery?

I have a function that is making an AJAX call to return data. Here is the code: function reqNodelistByField( i ) { $.ajax({ type: 'post', url: './req.nodelist.by.field.php', dataType: 'text', ...

javascriptjqueryajaxfunctionreturn

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

javascripthtml

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

javascriptreactjstypescriptmaterial-ui

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

javascripthtmlnode.jsformsexpress