Experiencing issues with handling $.json in Ember

I've been experimenting with using $.getJSON in conjunction with Ember.js (specifically, I'm aiming to bypass Ember-Data). Below is the code snippet:

App = Ember.Application.Create();

App.Model = Ember.Object.extend({

});

App.Users = App.Model.extend({
    id: null,
    name: null
});


App.UsersRoute = Ember.Route.extend({
    model: function(){
        return App.Users.findAll();
    }
});

App.Users.reopenClass({
  findAll: function() {
    var result = Ember.ArrayProxy.create({content: []});

    $.getJSON('user.php', function(data) {
      $.each(data, function(i, row) {
        result.pushObject(App.Users.create(row));
      });
    });

    return result;
  }
});

Here's the corresponding HTML snippet:

<body>
        <script type="text/x-handlebars" data-template-name="MyTemplate">


            {{#each item in controller }}
            <tr><td>
             <p> {{item.name}}</p>
            </td></tr>
            {{/each}}

        </script>

        <script type="text/x-handlebars">
            <h1>Application Template</h1>
            {{outlet}}
        </script>

    </body>

I am encountering an issue where the model is not loading. Do I need to include a controller as well? Is there anything else missing on my part?

Answer №1

There is a minor typo in the Application creation code.

App = Ember.Application.create();

By the way, your code seems to be correct. It appears that you intentionally left out the router mapping example.

Update:

You need to define a mapping for your UsersRoute:

App.Router.map(function() {
  this.resource("users", { path: "/users" });
});

Your Template should be named as users:

<script type="text/x-handlebars" data-template-name="users">


            {{#each item in controller }}
            <tr><td>
             <p> {{item.name}}</p>
            </td></tr>
            {{/each}}

        </script>

Lastly, make sure to create a link to your Route in the main application template:

<script type="text/x-handlebars">
  <h1>Application Template</h1>
  {{outlet}}
  {{#linkTo "users"}} Link to UsersRoute{{/linkTo}}
</script>

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

Top method for establishing a mysql connection in Express version 4

Recently, I installed node-mysql and started running on express 4. Although I'm new to express, I am eager to learn the best practices for handling database connections. In my current setup, I have app.js var mysql = require('mysql'); //se ...

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

Could someone shed light on why the key value is showing as undefined within the arrow function: // in parent component const Parent = () => { const [key, setKey] = useState<string>(); // this contains an expensive function we on ...

Encountering issues with gulp-angular-templatecache while processing angular templates through pipelining

I've encountered an issue with gulp-angular-templatecache in my gulpfile. Here's the task causing trouble: gulp.task('templates', function() { return gulp.src(paths.angularTemplates) .pipe(templateCache()) ...

Best practice for finding the parent element using Protractor

The recently released Guidelines advise against using the by.xpath() locators. I am making an effort to adhere to this suggestion, but I'm having difficulty locating a parent element. We are currently utilizing the .. XPath expression to access the p ...

JavaScript method to prevent users from entering numbers as the first two characters, with all subsequent characters being numbers only

I need a specific requirement for my form. The textbox field in my form is labeled "DEA License number", and I want it to only allow the user to enter alphabetic characters for the first two characters, followed by numbers afterward. I am looking to impl ...

What are the steps to create a basic star-rating system?

I attempted to create my own star rating system using HTML and CSS, but encountered issues with its functionality. While solutions like using direction: rtl or float: right worked, I am unable to implement them due to constraints related to PHP. Is there ...

Searching the Google Place API to generate a response for dialogflow

I am currently facing an issue while trying to utilize the Google Place API for retrieving details to display a map (by fetching coordinates) and location information (address) as a response from my chatbot. I have created this code snippet, but encounteri ...

Exploring deeply nested arrays in objects to locate matching elements

In my current array, there are multiple objects, each containing an array property. The array within each object holds different genres associated with a movie. const films = [ { name: 'Ant-Man and the Wasp', genre: ['Action&apo ...

Tips for effectively displaying camera.position.set (x,y,z) and camera.lookAt (x,y,z) within a three.js environment

While going through the tutorial on drawing lines in three.js documentation, I came across this code snippet: The code seems to be perfectly fine without any issues. <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

Nextjs: Issues with Dropdown functionality when using group and group-focus with TailwindCSS

My goal is to make an array visible once a button is clicked. By default, the array should be invisible, similar to drop-down menus in menu bars. I am utilizing the group and group-focus classes. While the array disappears as expected, it does not reappear ...

Struggling to create a SVG Line with DOM Manipulation in Typescript

I'm having trouble adding an SVG element to my div using the appendChild function in TypeScript. I want to add a line inside the SVG, but for some reason, I can't see the line output on my browser. There are no errors showing up either. Please he ...

Execute the npm command to organize the files in case the specified directory does

I am facing an issue with my npm package.json script that needs to be executed only when the dist folder is not present. Here is the snippet from my package.json: "scripts": { "predev": "! test dist && webpack --config=webpack.dll.config.js } ...

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

Implementing an API call using Redux Saga within a React application

I have been diving into learning saga by following a tutorial on Medium and trying to implement it in StackBlitz. I encountered a path issue initially, managed to fix it after several attempts, but now a different problem has come up. Despite searching on ...

What could be the reason for the failure of @babel/preset-react automatic transformation with Webpack?

The setup involves a Yarn monorepo with a babel.config.js that specifies the environment. React version being used is 18.1.x. I have a similar configuration that works perfectly fine in another setup, but it's failing here. I've been painstaking ...

HTML is being incorrectly rendered by the Express framework

Looking to Use HTML as View Engine in Express? After going through the link, I attempted to start my server with an index.html file on port 8001. However, it failed to render correctly and showed an error in the console: Server Started Error: SyntaxError ...

Display an array in Angular HTML by calling a function

I am currently working on an app that involves displaying cars retrieved from a database. Each car has a string of tags separated by commas, and I have created a function to split these tags into individual words and display them as tags. However, I am str ...

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

How can I extract a specific data value from a JSON file in Ionic 2?

Here is the JSON data: [ { "id": 1, "label": "saw", "total": "100" }, { "id": 2, "label": "saw1", "total": "300" }, { "id": 3, "label": "saw2", "total": "400" } ] Below is my Typescript code snippet: this. ...