Hi, I am new to ember and I am trying to create an drop box whose values I want to fetch from database. Can anyone help me understanding the step by step procedure? Thanks in advance.
High-level you need something along the lines of the following:
API layer
To get the data from the database to your client-side code you’ll need an API layer on the server side. Hopefully you already have that or are aware of it. If not here’s a very brief overly simplified overview of what/why:
an API layer would be the part of your server that:
- receives an HTTP request from your client (the Ember app)
- makes a database query to your database
- transforms the database data into some sort of JSON format
- sends the transformed data back to the client
There are lots of options. You can use something like Firebase for a “backend as a service” if your backend needs simple, or you could write one with one of the popular API frameworks like Express (Node/Javascript), Rails (Ruby), Django (Python), etc. There are also some very nice GraphQL frameworks and BAAS solutions out there (I think Hasura is one?).
Ember can consume API data in any format and through any means of fetching but the simplest and most straightforward is to use JSON:API or Rails ActiveRecord format coupled with Ember Data.
Fetch the data
Once you have a backend API which serves as the “face” of your server you can make a query from your Ember code. The easiest place to put this code is in the model hook of a route in Ember. This section of the guides demonstrates a very simple example of a model hook with either fetch or with Ember Data.
Render the data
Once you’ve fetched the data you can render it! If you fetched it in a route the simplest way is just to render it in the route template (ideally you’d break everything up into components but that’s getting ahead of ourselves a bit). The simplest version of that would look something like (assuming your options endpoint returned something like an array of objects such as { label: 'Option One', value: 'one; }):
// app/routes/my-route.js
import Route from '@ember/routing/route';
import fetch from 'fetch';
export default class PhotosRoute extends Route {
async model() {
const response = await fetch('/fetch-my-options');
const options = await response.json();
return { options };
}
}
// app/templates/my-route.hbs
<label for="options">Choose an option:</label>
<select name="options" id="options">
{{#each this.model.options as |option|
<option value={{option.value}}>{{option.label}}</option>
{{/each}}
</select>
This is just fetching the data and rendering a select control, it doesn’t cover changing the select value and binding it to something you can use in javascript, but that’s not too difficult to add on top.
Conclusion
That’s a lot of stuff and there’s some nuance to each step (picking a backend, picking an API format, fetch vs ember-data, component architecture, etc) but that’s really the hardest part of client/server web development. Once you’re comfortable with getting the data from your database to the rendered DOM things become a more straightforward learning path and usually you’re just focusing on component patterns at that point.
Anyway feel free to ask any follow up questions here or in the Discord server! Lots of people around to answer questions or help out if you get stuck. Good luck!