Ember - connecting to a JSON data source

Recently, I have been following a tutorial/example from codeschool and everything is going well. However, the example code includes the line:

App.ApplicationAdapter = DS.FixtureAdapter.extend();

Now, I want to maintain all the existing functionality but move the product data to an external JSON file.

Below is a snippet of my app.js file:

var App = Ember.Application.create({
LOG_TRANSITIONS: true
});

// Other code here...

App.ApplicationAdapter = DS.FixtureAdapter.extend();

// More code follows...

In addition, I have also included my HTML (index.html) file:

<!DOCTYPE html>
<html>
  <head>

    // Script and link references here...

</head>


<body>

   // Handlebars templates and scripts here...

</body>
</html>

The tutorial suggests creating a JSON file with specific content and changing the adapter in the app.js file to:

App.ApplicationAdapter = DS.RESTAdapter.extend();

I seem to be having trouble linking to the JSON file. Can anyone guide me on how to adjust the ApplicationAdapter to load the JSON file successfully?

UPDATE

To simplify this question:

  • I have index.html, app.js, and products.json files in the same directory

  • I need to update my app.js file as follows:

App.ApplicationAdapter = DS.RESTAdapter.extend({ xxxxxxxxx });

What should replace 'xxxxxx' in order to load my json file?

UPDATE

Update: I have managed to solve the issue! It turns out that I needed to include the path to my directory in the 'host' property:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/name of directory'
});

In my case where my project resides at localhost/ember, the following configuration works:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/ember'
});

Answer №1

I encountered a similar issue.

Instead of directly referencing the JSON file in your HTML, it is advisable to enhance the DS.RESTAdapter by incorporating a request for your file, as shown below:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/products.json?jsonp=?'
});

Give this approach a try. Feel free to reach out with any feedback!

Answer №2

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/custom directory name'
});

I recently had to make a change by removing the .json extension from my data file. Now it's simply named products (a plain text file). Whenever I try adding back the .json extension, the file cannot be located.

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

Tips for inserting line breaks within a <p> element in a contentEditable division

When I press enter or shift+enter on my contentEditable div, the new line is shown as a textNode within the div. However, I prefer the new line to be inside a p element. Seeking a straightforward solution Utilizing React Js, I store the content of the co ...

Storing JSON results in cache using Twitter Bootstrap Typeahead

Using the twitter bootstrap library in my application has been a fantastic experience. I am currently working on implementing bootstrap typeahead for autocomplete and facing an issue with caching the results to reduce server requests. During my research, I ...

Challenges with unique scrollbar designs and dynamic tab loading using AJAX

Hello to all amazing members of stackoverflow, I'm facing some major challenges getting my custom scrollbar to function properly with ajax-based tabs. Any assistance you can provide would be immensely helpful. I have most of it set up and operational ...

Utilizing Angularfire OAuth for Facebook authentication in login strategy

After successfully implementing the code below in the loginCtrl controller and login.html, I encountered some issues with setting up the workflow correctly. My goal is to achieve something like this: //check if the current $scope has authData //if so red ...

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

An error occurs when trying to cast a JSONArray into a java.util.ArrayList

I am currently working on an Adapter class that includes a Filter, and I encountered an error in the publishResults method. The list loads fine, and filtering works when typing into the filter. However, the app crashes with an error when deleting character ...

JSON data not displaying correctly in bootstrap table

I've been grappling with this issue for hours now, but I'm struggling to get my bootstrap table populated correctly. Here's the snippet of my HTML: <html> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.1 ...

Keycloak is having trouble interpreting the value returned by my ID provider. How can I resolve this issue?

I'm currently integrating Keycloak with an external OAuth server serving as the identity provider. During the login process, Keycloak initiates an authentication backchannel request and expects a JWT response from the OAuth server. However, when att ...

Encountering an error stating that 'coordinates should consist of an array with two or more positions'

Utilizing turf.js to generate a line depicting the path of an individual while their location is tracked. An array of coordinate arrays resembling Turf.js (lineString) is causing this error: Uncaught Error: coordinates must be an array of two or more posi ...

Decoding a JSON string in Java that contains a dynamically generated HTML table

I recently managed to generate a Json string from my dynamic html table by referring to this helpful resource: How to convert the following table to JSON with javascript?. Now, I am trying to figure out how I can parse and read this Json in Java when it l ...

The most efficient method for exchanging an array between PHP and Javascript

I have a set of data retrieved from a database stored in an array. The structure of the array is as follows; $rows[0]['id']=1; $rows[0]['title']='Abc'; $rows[0]['time_left']=200; $rows[1]['id']=2; $rows[ ...

jq displaying the name of the variable instead of its value in the written text

Currently, I am working on a bash script to modify a json template by replacing specific field values with arguments passed to my script. To achieve this, I am attempting to utilize jq for the editing process. However, my code is not substituting the --arg ...

Steps to redirect to a webpage by clicking on an image without relying on anchor tags

Is it possible to redirect to a new webpage without using an anchor tag when someone clicks on an image? Below is my code for the image. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_l ...

Determine the value above a certain price point by utilizing JSON operators

Json: "availability": [ { "qty": 25, "price": 3599, "is_available": true }, { "qty": 72, "price": 3599, }, "is_avai ...

Converting an array of objects into a flat array of objects with Javascript

My data array requires conversion to a flattened array returning new header and data. For instance, the first object contains a name with three data points: "title, first, last." The desired output is: From : { gender: 'male', name: { ...

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

Error message: "Unassigned value in knockout.js"

Here is my code snippet for binding to a textbox: var CategoryViewModel = { categoryModel: ko.observable({ categoryId: ko.observable(), categoryName: ko.observable(), active: ko.observable() }), GetCategoryById: functio ...

Store the running of a JavaScript file in memory

It seems highly unlikely that achieving the following is possible without expert confirmation: On page number 1, user and application data is requested as soon as the page loads. Page number 2 utilizes the same script, so requesting the same information w ...

Combine iron-page and bind them together

Recently, I've started learning about Polymer and I want to bind together paper-tabs and iron-pages so that when a tab is clicked, the content loads dynamically. After going through the documentation, this is what I have tried: <app-toolbar> ...

Styling Your Navigation Bar with CSS and Active States

Creating an interactive navigation element for a menu can be challenging, but here's a helpful example. http://jsfiddle.net/6nEB6/38/ <ul> <li><a href="" title="Home">Home</a></li> <li class="activ ...