$stateParams is not being properly defined when passed to the controller

I am currently utilizing ui-router to transfer an object to another state and controller by using

$state.go()

However, when I check the console.log for the $stateParams object, it appears as undefined. The object consists of x and y coordinates which are integers ranging from 0 to 20. When I log the userData in the EnterCtrl, the variables display correctly, leading me to believe that the correct data is being sent.

Despite exploring various examples and attempting different approaches, I have been unable to make it function properly. How can I ensure that the $stateParams is accessible by the CanvasCtrl?

The EnterCtrl sends the userData object via $state.go

myMap.controller('EnterCtrl',['$scope', '$state', function EnterCtrl($scope,$state){
    $scope.formData = {
        x: 0,
        y: 0
    };
    var userData = $scope.formData;
   // console.log(userData);

    $scope.goToAnswer = function(){
       console.log(userData);
            $state.go('answer', {coor: userData})  ;
        };

}]);

The Answer State where the object is passed to.

var answerState = {
        name: 'answer',
        url: '/answer/:coor',
        templateUrl: 'partials/answer.html',
        controller: 'CanvasCtrl',
        params: {coor: null}
    };

The controller which receives the stateParams.

myMap.controller('CanvasCtrl', ['$scope','$state','$stateParams',function CanvasCtrl($scope,$state,$stateParams){

var userData = $stateParams.coor;
    // var userDataY = $stateParams.coor.y;
    //var userDataX = $stateParams.coor.y;

   console.log(userData);
}]);

https://plnkr.co/edit/lwP7DGkwHl2ZWWegazyv?p=preview

Answer №1

Your problem has been resolved and the solution can be found here. In essence, I included JSON.stringify to transform the object into JSON before transmitting it, preventing it from displaying as [object Object].

Answer №2

To start, you'll want to create a factory that includes a function to set the state parameter value like this:

function setStateParam() { 
    var selectedRelease = "your value"
    $state.go('app.dashboard.detail.releases', {'selectedRelease': 
                    selectedRelease});
}

Next, make sure to inject this factory into both controllers.

In your first controller, call this function using the factory name. For example, if your factory is named factory, you would call it as: factory.setStateParam()

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

What is the best method to loop through this object with JavaScript?

Suppose I have the following data: let testData = { 'numGroup1': [[(1, 2, 3, 4, 5), (5, 6, 7, 8, 9)]], 'numGroup2': [[(10, 11, 12, 13, 14), (15, 16, 17, 18, 19)]] }; What is the best approach to iterate through this data using Jav ...

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

Fluid sifting and interactive webpage

I'm almost done with my website, but I'm facing a problem. There are 3 blocks of text on my page - 2 static and 1 dynamic. When I click a button, the page should change, which is working fine. However, when I added smooth scroll to the website, ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

What is the best way to add this new value to an array?

In my Angular controller, I have a function that is responsible for adding a part: $scope.addPart = function (part) { $http.get('stock/' + this.part.oemnumber).success(function (result) { $scope.stock = result; ...

Incorporate ng-model to manage dynamically generated HTML elements

I have created dynamic div elements with a button inside, and I want to access its value using ng-model, but the value is not being retrieved. Here is my code: var url = "/api/chatBot/chatBot"; $http.post(url,data) .success(function(data){ $scope.mes ...

Using SWR in React to conditionally fetch data and making Axios calls within an array map

With my project, I am working with two different API endpoints to retrieve data. The second endpoint requires a query parameter that is obtained from the response of the first endpoint. To handle this scenario, I have created a custom hook using the useSW ...

Ways to execute a script from termly on NextJS using JSX

I've been utilizing termly to assist in creating legal terms for a website I'm developing. They provided me with some HTML containing a script, but I am struggling to get it to execute on a page in JSX. I attempted to use both Script and dangerou ...

Having Trouble with Axios PUT Request in React and Redux

I'm having trouble making a PUT request to the server. I understand that for a PUT request, you need an identifier (e.g id) for the resource and the payload to update with. This is where I'm running into difficulties. Within my form, I have thes ...

Enhancing Bootstrap UI Typeahead to Display Multiple Fields in Results List

Having encountered the same issue as described in this question: Bootstrap-UI Typeahead display more than one property in results list? I made adjustments to the Plunker provided in the answer to fit my requirements: http://plnkr.co/edit/FdkvCUUD3ob7dt2 ...

How is it possible for a local variable to be utilized outside of its original scope in code?

After obtaining a game demo from a website, I came across this particular code snippet: if(nx == food.x && ny == food.y) { var tail = {x: nx, y: ny}; score++; create_food(); } else { var tail = snake_array.pop(); tail.x = nx; ...

Is there a way to have dynamic content from angularJS show up in an iframe?

When working with tabular content generated using ng-repeat in AngularJS, it is important to find a way to display this content within an iframe. The goal is to allow users to drag and resize the content as needed. However, using the iframe src attribute ...

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

Step-by-step guide on sorting WordPress posts by a custom field date

I've created an event sidebar section that will only show the next 3 upcoming events. I have successfully set up the custom post type and custom fields, but I am struggling to figure out how to order the posts based on the start date of the events, wh ...

Determine the total accumulation of time entities in VueJS

My task involves working with an array of time objects that users will add. The array comprises values like this, with a generic example of "01:01:01" for each date value. let timeObjects = ["01:01:01", "01:01:01", "01:01:01"]; The goal is to iterate thro ...

When an error occurs during form validation, the input field should be highlighted to indicate the mistake

The following HTML code includes validation for Code and Mobile number input fields. The Code field will highlight in red and show an error message when empty or invalid entries are made, while the mobile field will display an error message without changin ...

Is it possible to utilize the output of a function nested within a method in a different method?

I am currently facing a challenge with my constructor function. It is supposed to return several methods, but I'm having trouble using the value from this section of code: var info = JSON.parse(xhr.responseText); Specifically, I can't figure ou ...

Creating a hierarchical JSON layout for constructing dual d3.js graphs side by side

I am currently struggling with navigating through a JSON structure that I created in order to generate side-by-side donut charts. I suspect that my structure is not ideal and would greatly appreciate any guidance. My inspiration comes from Mike Bostock&ap ...

Display a loading bar while uploading files in an Angular directive

How can I implement a progress bar in an Angular directive for file uploads? app.directive('uploadPanel', function () { return { restrict: 'E', scope: { action: '@' }, }) ...

How to activate a button only if the specified conditions are met using VueJS 3

I'm currently facing challenges while working on a form to enable a button when certain conditions are met. The form I created includes fields for name, phone number, options, and a message. Once all requirements are filled, I aim to re-enable the di ...