Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

Question

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

As a newcomer to Ember.js, I am currently delving into understanding how Ember works. One issue I have encountered is calling my Django API from an Ember.js route using the following code:

this.store.findAll('MYMODEL', 'ANOTHER_MODEL_ID')

When executing this findAll method, it generates an API call like /mymodel/another_model_id/ where another_model_id is a dynamic ID (uuid-like string).

In my attempts to solve this problem, I experimented with overriding the findAll method using a custom adapter (mymodel adapter) that extends the ApplicationAdapter (JSONAPIAdapter with a custom buildUrl for adding a trailing slash). However, my efforts were unsuccessful as I struggled to access the ANOTHER_MODEL_ID parameter within the overridden method. I also explored overriding urlForFindAll and buildUrl methods but faced similar challenges.

What would be the most effective approach to accomplish this task and how can I achieve it successfully?

javascript django rest api ember.js

Answer 1

Answer №1

The findAll method does not accept an id argument. Perhaps you meant to use the find('modelname', 'id') method instead?

import DS from 'ember-data';

export default DS.Adapter.extend({
  findAll: function(store, type, sinceToken) {
    var query = { since: sinceToken };
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.$.getJSON(`/${type.modelName}`, query).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
});

Answer 2

The findAll method does not accept an id argument. Perhaps you meant to use the find('modelname', 'id') method instead?

import DS from 'ember-data';

export default DS.Adapter.extend({
  findAll: function(store, type, sinceToken) {
    var query = { since: sinceToken };
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.$.getJSON(`/${type.modelName}`, query).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
});

Answer 3

Answer №2

By utilizing the urlForQuery function and defining my adapter as a JSONAPIAdapter extended with DataAdapterMixin, I was able to resolve the issue.

Answer 4

By utilizing the urlForQuery function and defining my adapter as a JSONAPIAdapter extended with DataAdapterMixin, I was able to resolve the issue.

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

Answer №1

Answer №2

Similar questions

Retrieving a JavaScript variable from a Python Selenium request

Error displayed inline

Meteor - An error occurred in the Subscription Publish Function because it returned an array of non-Cursors

JavaScript special character encoding techniques

Unraveling the Mysteries of AngularJS in a Tutorial Snippet

Fade in background color with jquery when scrolling

Easily visualize the JSON object hierarchy within Eclipse using JavaScript

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Safari has no issues running Javascript, but other browsers are encountering failures

Retrieve JSON data using AngularJS

What causes the toggle effect in my jQuery onclick function to alternate between on and off when the initialization is repeated multiple times?

Is there a way to determine the number of syllables in text as it is being typed?

Design a custom Bootstrap dropdown using an input[type="text"] element

Scrolling down a jQuery div after each new item is added.OR

Ways to add a string to an array as a labeled object in javascript?

Checking for null properties in Typescript objectsorHow to verify if a

Performing an AJAX call with JQuery when clicking on multiple anchor elements

Instructions for subtracting the value of a cell in column 22 from a cell in column 24 within the same row when a change trigger occurs utilizing Google Apps Script

React Hooks: In useEffect(), unable to modify parent component's state

Modifying the page's left attribute dynamically with jQuery based on window resize