Ember - Issue with Page Display

Currently tackling my first ember application, which consists of two pages: the Welcome page and a page displaying student details. To accomplish this, I have established two routes named index and studentdb. Unfortunately, I'm encountering an issue where the second page is not being displayed correctly. Utilizing Mirage in accordance with Ember's guidelines. Here's a snippet of the relevant code:

templates/index.hbs

<h1> Welcome </h1>

{{#link-to "studentdb"}}List{{/link-to}}

{{outlet}}

templates/studentdb.hbs

<h2> Welcome to Student Database </h2>
<h4> Following are the details </h4>

{{#each model as |student|}}
  <p>Name: {{student.Name}}</p>
  <p>College: {{student.College}}</p>
  <p>Department: {{student.Department}}</p>
{{/each}}

{{outlet}}

routes/studentdb.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {
        return this.store.findAll('student');
    }
});

models/student.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  Name: DS.attr(),
  College: DS.attr(),
  Department: DS.attr()
});

mirage/config.js

export default function() {

  this.get('/student', function() {
    return {
      data: [{
        type: 'student',
        id: 1,
        attributes: {
          Name: 'Archana',
          College: 'MNM Jain',
          Department: 'CSE'

        }
      }, {
        type: 'student',
        id: 2,
        attributes: {
          Name: 'Monica',
          College: 'Sathyabama',
          Department: 'IT'
        }
      }, {
        type: 'student',
        id: 3,
        attributes: {
          Name: 'Manoj',
          College: 'Kumarsaamy',
          Department: 'MECH'
        }
      }]
    }
  });
}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('studentdb');
});

export default Router;

If anyone can provide assistance, it would be greatly appreciated.

Encountering errors even after re-installing Ember based on the instructions outlined here: https://github.com/ember-cli/ember-cli/releases

npm WARN deprecated [email protected]: This package is no longer maintained. See its readme for upgrade details. npm ERR! registry error parsing json npm ERR! registry error parsing json npm ERR! registry error parsing json npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "[email protected]"npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! http://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request: npm ERR! C:\Users\learner\npm-debug.lo

Any assistance would be greatly appreciated.

Answer №1

It is essential to specify the route with this.get('/students', as it leverages the functionality of ember-inflector for url pluralization, following the guidelines set forth by jsonapi.org.

Answer №2

When I first started learning ember, I encountered a similar issue. I found a helpful discussion on github that made me realize my guides were newer than the version of ember-cli installed on my system:

https://github.com/samselikoff/ember-cli-mirage/issues/422

To resolve this, I decided to update ember to version 2.2.0-beta.3 by following these instructions:

https://github.com/ember-cli/ember-cli/releases

After updating ember and re-installing ember-cli-mirage, everything worked smoothly!

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 dynamically coloring table cells in Spotfire based on their values

Creating Dynamic Table with HTML After successfully creating a cross table in Spotfire, I now aim to replicate the same table in HTML within a text area. I managed to add values using calculated values, but I'm stuck on how to dynamically set the bac ...

Who is the father of Bootstrap Popover?

I'm currently facing an issue with getting a popover to be placed within a specific element. As of now, the popover is being inserted directly into the <body>, but I require it to be relative to other elements. I have been unable to locate a met ...

Updating component (`App`) during the rendering of another component is not allowed

I have encountered an issue with a react component that I am struggling to resolve. It involves a radial knob control, similar to a slider, and I am trying to achieve two main objectives: Adjust the knob and pass its value up to the parent component for ...

Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...

If the prompt displays 'Monday', then you can output the following days in the console: 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', and 'Sunday'

Could someone assist me with modifying my code so that the entered day is displayed at the end of all days in the console? Currently, it shows up at the top. Here is what I have tried: JavaScript const daysOfWeek = ["monday", "tuesday" ...

Interested in building an album app using Django Tastypie and Backbone?

I'm currently working on developing a new album application using django, with two essential django models: class Album(models.Model): name = models.CharField(max_length=100) family = models.ForeignKey(FamilyProfile) created_by = models.F ...

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

I'm having trouble understanding why my code is not working. I've read that Safari 11 should be compatible with getUserMedia APIs from iOS 11, but for some reason it's not functioning as expected. My aim is to capture a QR code in a live str ...

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...

Disregard any unrecognized variables associated with the third-party package

I've been working on integrating the bluesnap payment gateway into a react/ts project. I added their hosted javascript code to my public/index.html and started the integration within a component. However, when compiling, an error pops up saying ' ...

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

I'm facing a challenge that I need help with: My HTML/CSS layout currently looks like this: Screenshot of how my CSS/HTML appears on the screen upon page load: As I scroll down, I encounter a green element: While scrolling down -> Upon further s ...

Can I invoke a specific function from a controller in AngularJS?

I am new to developing in the MEAN stack and working on a Todo App where I create tasksheets and store todos within those specific tasksheets using AngularJS. Initially, I was retrieving all todos without considering which tasksheet they belonged to or cr ...

Using local variables in NodeJS callbacks

Despite the abundance of information on SO, I have yet to find a suitable answer to my particular situation. The following code snippet is causing me issues: for(var i=0; i < shop.collections.length; i++){ if(!shop.collection[i].active){ var dat ...

What is the reason objects cannot be compared in JavaScript?

I have a straightforward code snippet here. Its purpose is to authenticate the user against the author of the post and grant the authenticated user access to edit the post. exports.edit = function(req, res){ Post.findById(req.params.post_id, function ...

Click on the hyperlinks one by one that trigger ajax events

There is a feature on the popular social media platform reddit.com where you can load more comments by clicking a link. I understand that comments may be hidden for performance reasons, but I would like to automatically expand all comments without having t ...

Sending a JSON Object to an API endpoint using the $.ajax method

While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...

Obtaining the variable from the exec function in Node.js can be achieved by capturing

I am trying to access the values of variables w1 and h1 outside of the exec function and display them using console.log. exec(command, function(err, stdout, stderr) { var resolution = stdout.split("x"); w1 = resolution[0]; h1 = resolution[1]; ...

In TypeScript, the choice between using `private readonly` within a class and

I have been contemplating the best method and potential impacts of referencing constants from outside a class within the same file. The issue arose when I was creating a basic class that would throw an error if an invalid parameter was passed: export cla ...

Keep the Bootstrap modal open while the JavaScript validation is running, and redirect the form action if the validation is successful

When trying to execute the submit event from a form, my code is supposed to keep the modal open if validation fails. However, for some reason, this functionality is not working as expected. var myForm = document.updteform; var condition = true; if ...

The constant reloading of the page is hindering the crucial display of the data

After successfully getting something to work, I noticed that the data disappears when the page refreshes. How can I prevent this from happening? <html> <head> <meta charset="utf-8"> <title> IT Services </ti ...