What is the best way to transfer the $http response value to another function?

I currently have these two functions set up. One function, $scope.submit, handles posting data to the server and capturing the response value. The other function, $scope.addTeams, is responsible for adding teams based on the response from $scope.submit. While this approach works, I am aware that it may not be the most efficient solution. What would be a better approach to achieve this?

$scope.submit = function() {
  $http.post('/api/createclub/', {
    club: $scope.club
  }).success(function(response) {
    console.log(response);
    $rootScope.clubId = response._id;
  });
};

$scope.addTeams = function() {

  console.log($rootScope.clubId);

  $state.go('createTeam', {
    clubId: $rootScope.clubId
  });
  $scope.cancel();
};

Answer №1

What could be improved in

$scope.submit = function() {
      $http.post('/api/createclub/', {
        club: $scope.club
      }).success(function(response) {
        console.log(response);
        $scope.addTeams(response._id);
      });
    };

    $scope.addTeams = function(id) {

      $state.go('createTeam', {
        clubId: id
      });
      $scope.cancel();
    };

Answer №2

Make sure to invoke your addTeams function within the callback of your $http post method. Pass the id value you are currently assigning to rootScope as an argument.

It's not advisable to directly assign properties to the rootScope like this.

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

Using Next-auth.js: Redirecting from getServerSideProps to a specific callback URL - How can it be done?

Hey, I've been working on implementing authentication with the NextAuth library in my Next.js application. While following the documentation, I encountered a situation that wasn't covered. I'm attempting to create a 'route guard' o ...

Issue with React not displaying JSX when onClick Button is triggered

I've recently started learning React and I'm facing a problem that I can't seem to figure out. I have a basic button, and when it's clicked, I want to add another text or HTML element. While the console log statement is working fine, th ...

The resizing of the window does not occur when a scrollbar is automatically added in IE11

I encountered an issue with my Angular project where the view resizes properly in Chrome and Firefox, but not in IE 11. When the scrollbar appears, some components get covered by the scrollbar. Here is the CSS for the menu: #menu-principal .navbar-lower ...

Utilizing jQuery to dynamically add results and prevent duplicate entries in will_paginate

I am currently using will_paginate to easily manage the comments pagination in my Rails 3 application, and so far it's been working flawlessly. At the moment, I have set up the display to show 10 comments per page. However, whenever I add a new comme ...

What are the steps to incorporate swipe functionality into my component?

I've created a carousel using React-slideshow-image, but the issue is that it doesn't support swiping on mobile devices. I would like to implement swipe functionality myself, but I'm not sure how to go about it. Can anyone provide guidance ...

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

I am in the process of creating a website that features a fixed (non-sticky) footer placed behind the main content using the z-index property. The footer only becomes visible when the user scrolls to the bottom of the page, achieved by assigning a margin-b ...

Issue with Vue 2: Promise does not resolve after redirecting to another page

Although I realize this question might seem like a repetition, I have been tirelessly seeking a solution without success. The issue I am facing involves a method that resolves a promise only after the window has fully loaded. Subsequently, in my mounted h ...

The JavaScript syntax dollar sign

I am currently studying a JavaScript source code and it's my first time writing JavaScript. I find some of the syntax confusing. <script id="source" language="javascript" type="text/javascript"> $(function () { window.onload=function() ...

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

Working with Ruby on Rails by editing a section of embedded Ruby code in a .js.erb file

Currently, I am in the process of developing a single-page website and have successfully implemented ajax loading of templates to insert into the main content section. However, I am encountering difficulties when trying to do this with multiple templates u ...

What is the reason behind Meteor automatically updating a record without the need to run a "Meteor.call" function for an update?

I am currently developing a Meteor.js application and while I have grasped the basic concepts of Meteor, I feel like I might be missing something when it comes to its reactivity principles. Using angular-meteor, I am utilizing a $scope variable in my view ...

The networking feature stops functioning on Android devices after upgrading from Ionic 1.5.0 to 1.6.3

After upgrading from ionic 1.5.0 to 1.6.3 (the latest version), I noticed that networking ajax calls were no longer working on Android. I had to remove and re-add the android platform, and there seemed to be a change in the apk names from MainActivity-debu ...

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

Why does JavaScript function flawlessly in FireFox, yet fails completely in other web browsers?

When it comes to browsing, FireFox is my go-to browser, especially for testing out my website Avoru. However, I recently encountered an issue when checking the functionality of my code on other major browsers like Google Chrome, Opera, and Safari. It seems ...

Clicking on an option within a div that has an ng-repeat does not update the ng-model

Why is my ngModel, myOpt2, not changing when selected while myOpt does change? Any specific reason for this? ¿Por qué mi ngModel, myOpt2, no cambia al ser seleccionado mientras que myOpt sí lo hace? ¿Hay alguna razón específica para esto? var app ...

Using JavaScript, extract current date from an API data

Here is an example of how the data from my API appears: const data = [{ "id": "1", "name": "Lesley", "creationDate": "2019-11-21 20:33:49.04", }, { "id": "2", "name": "Claude", "creationDate": "2019-11-21 20:33:09.397", }, { "i ...

Choosing a versatile model field in a Django CMS plugin

Currently, I am developing a Django CMS plugin that includes a model choice field dependent on another field in the form. To update the choices in the model choice field based on the trigger field selection, I am using AJAX. However, when submitting the fo ...

How can a response header be included for a redirect in Express?

In my NodeJS Express application, I am attempting to redirect users to a different URL and then include a specific header in the response. Is it feasible to achieve this functionality? For instance, let's say a request is redirected to https://example ...

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

What is required to run npm rebuild node-sass --force following each instance of a `yarn add` command?

As I attempt to set up the isemail npm library, everything appears to be going smoothly. However, when I execute yarn start:dev, which essentially runs "npm run build:dev && ./scripts/gendevconfig.sh && cross-env BABEL_DISABLE_CACHE=1 NODE_ ...