The retrieval of records using EmberJS's $.ajax method seems to be returning undefined for the model when setting

Ember-Data is definitely helpful, but I found myself in need of a custom solution to retrieve a user based on the invitation_token and also trigger a different controller action on the backend Rails system.

Check out the route I came up with:

MyEmberApp.InviteRoute = Ember.Route.extend({
  model: function(params) {
    var self = this;
    var user;
    $.ajax({
      type: 'GET',
      url: 'api/v1/users/invite?invitation_token=' + params.token,
      success: function(response) {
        user = self.store.createRecord('user', response.users[0]);
        console.log(user);
        return user;
      },
      error: function(response) {
        console.log("Oops, something went wrong.");
      }
    });
  },
  setupController: function(controller, model) {
    controller.set('model', model);
    console.log(model);
  },
});

In the setupController section, the console.log(model) shows as undefined - could it be related to using an $.ajax call? Any ideas on how to proceed? Using pure ember-data isn't feasible for me since I require user authorization at the Rails controller level.

Answer №1

Don't forget to include the return statement in your code.

  fetchData: function(parameters) {
    var self = this;
    var userData;
    return $.ajax({
      type: 'GET',
      url: 'api/v1/users/data?id=' + parameters.id,
      success: function(response) {
        userData = self.store.createRecord('data', response.data[0]);
        console.log(userData);
        return userData;
      },
      error: function(response) {
        console.log("An error occurred while fetching data.");
      }
    });
  },

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 retrieve a nested JSON property that is deeply embedded within

I am facing an issue with storing a HEX color code obtained from an API in a Vue.js app. The object app stores the color code, for example: const app = {"theme":"{\"color\":\"#186DFFF0\"}"}. However, when I try to access the color prope ...

All nodes within the Angular ivh-treeview will automatically expand upon loading

Looking to optimize my AngularJS ivh-treeview. I am aiming to have all child nodes expanded without the need for manual expansion. Presently, the tree structure looks like this: $rootScope.nodes= [{ label: 'node1', value: &apo ...

Setting an interval for a specific function to trigger after a delay of 5 seconds

I'm struggling with setting an interval for the $.get ajax method in my code. Take a look at what I have so far... setInterval(function () { passFunction(jsonData); } ,5); $.get({ url: 'pass.php', success: ...

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

Is the "as" decorator in Next.js Link no longer functioning properly with dynamic routes?

My route is dynamic: test/[id].js When a user clicks on a link to /test/1, Next.js successfully renders the correct page. The issue arises when I try to mask the /test/1 URL with something else. <Link href="/test/1" as="/any/thing/here ...

Obtaining a cookie in Vue.js independently: a step-by-step guide

After setting a cookie using laravel, I'm looking to retrieve it in vue.js without relying on or installing any external dependencies. Can anyone please suggest a way to achieve this without extra tools? Your guidance would be greatly appreciated! ...

Add a Bootstrap Popover to the Amazon website

Currently, I am developing a straightforward chrome extension and my aim is to incorporate a basic bootstrap popover on a product page from amazon.com using my content.js script. To achieve this, I have implemented the following code within content.js for ...

Steps for sending a POST request for every file in the given array

I am working on an angular component that contains an array of drag'n'dropped files. My goal is to make a POST request to http://some.url for each file in the array. Here is what I have been attempting: drop.component.ts public drop(event) { ...

Transform spaces into %20 from an HTML input field by utilizing JavaScript or jQuery

Hi there, I'm encountering an issue with the input field on my website where users can enter search terms. I am currently extracting the user's input value and adding it to a URL string. jQuery("#searchButton").click(function(){ var simpl ...

Show information from table B following the selection made in table A

In my project, I need to retrieve and display data from the "foom" table once an option is selected from the "factory" table. The options in the select dropdown are populated with data from the "factory" table. The layout of the tables is as follows: Ima ...

How to target child <div> elements within a parent <div> using jQuery

I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids. My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave th ...

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

Link specifically for the ADFS 2.0 single sign-on application

I've been conducting research on both Google and Stackoverflow but haven't been able to find a solution to my problem. Within my ADFS portal, there are 5 different services that can be selected. I'm trying to determine how I can generate a ...

The framework for structuring web applications using Javascript programming

While I have extensive experience in PHP and C# programming, my knowledge of Javascript is limited. When it comes to server side programming, MVC is my preferred method as it allows me to keep my code well-organized. However, when it comes to writing Java ...

Floating box remains fixed at the top of the screen

While exploring the web, I stumbled upon a hotspot/popup that I added to my page. Unfortunately, I lost the link to the website where I found it. Somehow, after making some changes, the popup now appears at the top of the image rather than aligned with the ...

Apply the "active" class to the list item when its corresponding section is in view

I have a webpage with at least four sections. My goal is to dynamically apply the active class to the corresponding menu item when scrolling through each section. For instance, if the "About Us" section is visible on the screen, I want to mark the correspo ...

SignOut operation in Express.js Firebase instantly responds with a status of 200 to the client-side Fetch POST request

I'm currently facing an issue with my POST request setup using the Fetch API in my client-side JavaScript. The request is being sent to my server-side JavaScript code which utilizes Express Js and Firebase Auth. The problem arises when the auth().sign ...

Explore the values within the Json Array

Attempting to correlate two sets of array values. One set is sourced from a local JSON file, while the other set comes from a backend service. Data from Local JSON: var localJsonArray = { "records": { "cat1": [{ "id": 1234, ...

Explore numerous databases using mongoosastic

Currently in my Node.js application, I am utilizing Mongoosastic to fetch data from ElasticSearch : Article.search({ "match_all": {} }, function (err, results) { console.log(results.hits.hits); Post.search({ "match_all": {} }, function (err, r ...

Ways to limit the extent of inline CSS styling?

I am working on a project where I need to apply unique CSS to each item in a list dynamically. Each item will have its own set of CSS rules specifically tailored to its elements. <div id="thing1" class="vegas"> <style> p { font-size: ...