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

Retrieve the concealed method's name within the immediately invoked function expression (IIFE

This Meteor sever code has a private method called printFuncName within an IIFE. However, when this method is invoked from a public method, it results in the following error: TypeError: Cannot read property 'name' of null I am curious to unde ...

javascriptmeteor

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

Direct your attention to alternative data sources following the selection of an item in the typeahead search feature

Having some trouble with angular-ui bootstrap: I am using 2 input elements: <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $ev ...

javascriptangularjsangular-ui

Overlaying a div on top of an iframe

Struggling to make this work for a while now. It seems like a small issue related to CSS. The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom. Here is the code snippet: .overlay{ width: ...

javascriptjqueryhtmlcssiframe

What is the procedure for importing material UI components into the main class?

Hey there! I'm currently working on integrating a "SimpleAppBar" element into my React app design. Below is the code snippet for this element sourced directly from the Material UI official website: import React from 'react'; import PropType ...

javascriptreactjsmaterial-ui

Using JQuery to fill an HTML dropdown menu with data from a JSON file

I've been struggling with this issue for a while and despite reading through other posts, I still can't seem to get it to work. My problem lies in populating a drop down menu with JSON data. Although the drop down menu appears on my HTML page, i ...

javascriptjqueryhtmljsonajax

Whenever I try to utilize the "ng-list" in JavaScript, I encounter issues accessing the variable model

HTML <input type="text" ng-list ng-model="OtherHobby" />{{OtherHobby}} <br /> {{AllHobbys}} Javascript $scope.OtherHobby = []; $scope.AllHobbys = $scope.OtherHobby; I ran a test on this piece of code. The variable "OtherHobby" w ...

javascriptangularjs

The integration of angularFileUpload seems to be malfunctioning

This question may seem simple, but I am new to using Angular. My goal is to upload images on my website using AngularFileUpload. Here is what I did when initializing my app: var app = angular.module('myApp',['ui.router'],['angular ...

angularjsnode.jsnpmangular-file-upload

Issues with utilizing React Router and Hooks

Recent Update: I have made some changes to my code by converting it to a functional component. However, it seems like nothing is being returned from the API or there may be an issue with how I am mounting the component. The error message "TypeError: Cannot ...

javascriptreactjsreact-routermaterial-uireact-hooks

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

javascriptangulartypescriptangular-materialangular-reactive-forms

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

javascriptphphtmljquery

The ng-if directive is displaying an element with a false conditional expression

Can anyone explain why this particular element is being displayed? I have even tested it with values from the component. <div ng-if="1 == 2"> <p>File successfully uploaded.</p> </div> ...

angularjs

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...

javascripttypescript

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

javascripthtmlangulartypescript

Get connected to your favorite music on iTunes without the hassle of opening a new window by simply clicking on the

Is there a way to call a link to iTunes (itms://...) without opening a new window? I've tried using window.open but that just opens a new window. Also, $.get('itms://...'); doesn't seem to work for me. Are there any other options avail ...

javascriptjquerypopupitunes

Is Jquery Steps causing interference with the datepicker functionality?

I am currently using the jquery steps plugin for creating a wizard on my website. However, I am experiencing some issues with the functionality of the datepicker and qtip inside the steps. Even after switching the .js references, the problem still persists ...

javascriptjquerydatepickerjquery-steps

Incorporate the operating hours of a Business

If I specifically choose Sunday and Monday with working hours ranging from 08.00 to 20.00, the output should be 1&08:00&20:00,2&08:00&20:00. How can I achieve this using Vue.js? This is my current code: <script> submitBox = new Vue( ...

javascriptjqueryhtmlvue.jsvue-component

Is it possible for a JavaScript .execute function to be executed synchronously, or can it be transformed into an Ajax

Currently, I am utilizing the ArcGIS API for Javascript which can be found at this URL: The JavaScript code snippet I'm working with appears to be running asynchronously. Is there a way to convert it to run synchronously or potentially transform it i ...

javascriptajaxsynchronous

What is the method for producing an li and anchor tag using a list object?

Here is the response I received from my web service, and now I need to transform it into a list item tag: {"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]} How can I create li tags based on the above output? This is the desired format for t ...

javascriptjqueryc3.js