The values stored in UI Router $stateParams can only be accessed and viewed

Currently, I am passing an id to a new state using $stateParams which works well. However, the issue arises when the user reloads the page since there won't be any values in $stateParams. To solve this problem, I decided to store the $stateParam id in localStorage upon initial page load. In case of a reload, if the id from $stateParams is not present, it can be manually assigned. See example below:

// Make sure params are set upon page reload
if (!$stateParams.id) {
  $stateParams.id = localStorageService.get('campaignId');
  $state.go($state.current, $stateParams);
}

This method works on my local machine, but throws an error on my development server:

Cannot assign to read only property 'id' of object '#<Object>'
.

I'm wondering if there is a way to make $stateParams writable?

Thank you in advance for your assistance.

javascriptangularjsangular-ui-router

Answer №1

This solution is effective for my needs

const queryParams = {...history.state};

Answer №2

After struggling to find a way to directly modify $stateParams, I decided to work around the issue by creating a new object.

var stateParamsClone = {};
// To ensure that parameters are retained on page reload
if (!$stateParams.id) {
  stateParamsClone.id = localStorageService.get('campaignId');
  $state.go($state.current, stateParamsClone);
}

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

PHP captures the checkbox value through the $_POST method, whereas jQuery removes the checked class from it

I currently have a form with 2 checkboxes: Registered and Not Registered. If the Registered checkbox is ticked, then 2 additional options should appear: Active and Not Active. If the Registered checkbox is unticked, both the Active and Not Active options ...

javascriptphpjquerycheckbox

Display numbers greater than zero using Angular

If the price of a car is 0, I only want to display the name and leave the price blank. If the price is greater than 0, then both the name and price should be shown. Any suggestions on how to achieve this? <tr> <td>{{cars.name}}</td> & ...

angularjsconditional-statements

Issue with Material-UI tab not showing the component upon page load

After setting up material-ui tabs with react-router, I encountered an issue where only the tab names Tab A and Tab B are displayed upon page render. The desired behavior is for the TabAReport component to be automatically rendered without requiring user in ...

javascriptreactjsreact-routertabsmaterial-ui

Adding a React function to an external object without using React

Here's a simple issue that I'm facing. I am using React Highcharts Official and I want to import graphOptions from another file for the options attribute on ReactHighcharts. <ReactHighcharts highcharts={Highcharts} options={graphOptions} /> ...

javascriptnode.jsreactjshighchartsreact-highcharts

Identifying the conclusion of a folder being dropped in vanilla JavaScript

I am working on determining when a directory tree has been completely traversed after being dropped onto a page. My goal is to identify the point at which the next process can begin once the entire folder and its sub-directories have been processed by the ...

javascript

What is the best method for choosing a document from a Firebase based on its creation time?

Currently delving into Firebase as part of my project, struggling with setting queries in the Database. I've provided a breakdown of my Firebase database structure below: Looking to retrieve the most recently created document from the 'subscrip ...

javascriptgoogle-cloud-firestore

Rearrange the position of one div to be placed next to another div and assign the float property

I have numerous divs located on my webpage, including .rightColumnBar and .divAttributes. HTML <div class="mainContent"> <div class="pageContent"> <form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" nam ...

javascriptjqueryhtmlcss

Issue encountered when concealing page elements followed by revealing them again

My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is: $(document).ready(function() { $("#HomePage")[0].style.visibility = "visib ...

javascriptjqueryhtmlcss

Exploring an array of objects to find a specific string similar to the one being

I recently developed a TypeScript code snippet that searches for objects in a list by their name and surname, not strictly equal: list = list.filter( x => (x.surname + ' ' + x.name) .trim() .toLowerCase() .sear ...

javascripttypescript

Using a ternary operator to render a span tag in ReactJS

I need to display a number in a span tag with larger font size in Spanish. Here is my React.js code using a ternary operator: <div> {togo !== 0 ? (<div className="text-center"><span className="display-4">{togo}</span>{togo > ...

javascriptreactjsternary-operator

Breaking up an array into smaller chunks with a slight twist

Here's a straightforward question. I have an array, like this: let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], maxChunkLength = 3; I am looking to divide this array into multiple arrays as follows: [[1, 2, 3], [3, 4, 5], [5, 6, 7], [7, 8, 9], [9, ...

javascriptarrays

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

Determining if the input in a field is a number in Angular

I'm facing a dilemma in my Angular application where I have a field that can accept either an email address or a phone number. My intention is to display a specific span if a phone number is entered, but unfortunately, I am unable to achieve this fun ...

angularjs

Adding images in ascending order according to the parent div's ID

If I have three different divs with unique IDs on a webpage <div id="product-id-001"></div> <div id="product-id-002"></div> <div id="product-id-003"></div> Is there a way to add image elements based on the ID of each d ...

javascriptjqueryimageappend

Retrieve a zip file using React and Node from a RESTful API

I have an application built with React and Node where I have a table that includes a download button. Clicking the download button triggers a request to my Node app, which in turn should call a REST API to download a zip file directly into the browser. In ...

javascriptnode.jsreactjsexpressaxios

The present IP address of the client through AJAX and PHP

This code snippet is on my PHP page: // Setting the timezone to Asia/Manila date_default_timezone_set('Asia/Manila'); $date = date('m/d/Y h:i:s a', time()); if (!empty($_SERVER['HTTP_CLIENT_IP'])){ $ip=$_SERVER['HTTP_C ...

javascriptphpjqueryajax

What is the reason for jquery requiring _$ when overwriting?

var // Optimizing references to window and allowing renaming window = this, // Increasing efficiency in referencing undefined and enabling renaming undefined, // Creating aliases in case of jQuery overwrite _jQuery = window.jQuery, // Creating aliases in ...

javascriptjquery

Dynamic search form technology

My HTML view includes a search form and AJAX code to handle the form request $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a. ...

javascriptjqueryhtmlajax

Creating Global Variables in Node/Express Following a Post/Get Request

How can I dynamically pass the payment ID received after a POST request to a subsequent GET request in Node/Express for a payment system? Below is an example code snippet from my project: let paymentId; app.post("/api/payments", (req, res) => ...

javascriptnode.jsexpress

How can we avoid multiple taps on Ext.Button in Sencha Touch?

Currently working on a Sencha Touch game, but struggling with users tapping buttons multiple times. Looking for a simple solution to prevent multiple tap events in the app.js file so that only one tap event is executed even if a user taps or presses for an ...

javascriptextjsextjs4sencha-touch-2