REST Api does'nt work

Ember Data
1

Hi people!

I“m learning ember and have troubles with REST api. I“ve read docs, but I just can’t understand, how it works. It’s really a problem, and I’d like to ask experiences people, and I would be very grateful for any help.

I just need to understand the principle of how it works.

In China, when kung-fu masters teach their students, they say “do as I do”. So, show me please how you do it!

So, we have two routes in Laravel backend, that return JSON.

Here is response of index (/) route:

{
    "responce":[
        {
            "id":0,
            "title":"main",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam."
        },
        {
            "id":1,
            "name":"about",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?"
        },
        {
            "id":2,
            "name":"contacts",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem."
        }
    ]
}

And here is response of posts (/posts) route:

{
    "posts":[
        {
            "id":0,
            "name":"First",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing."
        },
        {
            "id":1,
            "name":"Second",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas quia distinctio ex consequuntur."
        },
        {
            "id":2,
            "name":"Third",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, similique. Voluptatum, libero sequi."
        }
    ]
}

In Ember we have routes “index” and “posts”. I suppose there must be some kind of loop that processes the received data and outputs it.

The result on the index page should look something like this:

<!--
Index page in Ember
-->

<h3>main</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam.</p>

<h3>about</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?</p>

<h3>contacts</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem.</p>

And on the posts client page:

<!--
Posts page in Ember
-->

<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>

<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas quia distinctio ex consequuntur.</p>

<h3>Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, similique. Voluptatum, libero sequi.</p>

What Ember elements should be involved in this, how it all communicates and works?

I really have not found any demonstrative examples on the Internet that show the whole chain.

If I saw all this, I would immediately understand. Great thanks in advance! (excuse me my french)

2

Unfortunately this a tall ask. There is a lot going on in your inquiry. I would also guess that you’re conflating concepts.

The Ember concepts you asked about are not related to the data you are attempting to consume. This is because in Ember the terms route/controller/etc. are specific to a UI not data transfer. That is where ember-data comes in to to fill the gap. But the two are separate concepts that fit together. You can have an app that does not use ember-data.

In your very simple data model you could consume the API with native fetch or XMLHttpRequest if you wanted. Data consumption addons (like ember-data) are abstractions that try to help define and facilitate the data management of an app when the apps’ complexities reach the point when you need more help.

I took the time to create a sample application using the data you provided above: Ember Twiddle

It has two main routes to demonstrate using your typical AJAX (in this case jQuery) to fetch the data. The other route shows using ember-data to fetch and manage the data. Note the caching and abstractions that ember-data provides when you are navigating the routes; while the native approach is simply blind and fetches every time.

In the ember-data solution it is important to know that the / route you offered looked to me like pages but the endpoint was / and the internal type structure was responce not pages. This lead to a bit of custom creativity in the use of ember-data adapters and serializes. While the posts endpoint work out of the box since it conformed to the default expectations of the RESTAdapter.

Also, I split the responsibility to fetch data to the route while the responsibility to provide the template the correct data to the controller (in these cases a simple alias reads was enough).

I hope this can offer some insight to a simple default app based on the data you currently are interested in.

3 Likes
3

Thanks @sukima for making a whole demonstration app. It shows how to use Ember Data to solve the problem. But in order to teach the basics, I’m going to show a smaller solution that fits on one screen:

// app/routes/index.js
import Route from '@ember/routing/route';
export default Route.extend({
  // this ensures that the "model" in our route will be exactly the data 
  // retrieved from laravel. 
  async model() {
    let response = await fetch('https://your-laravel/wherever-the-data-is');
    let json = await response.json();
    return json;
  }
});

{{!- app/templates/index.hbs -}}

{{! then in our template, we can access properties on the model
     like "responce", and iterate over them to render the output. }}
{{#each model.responce as |row|}}
  <h3>{{row.title}}</h3>
  <p>{{row.content}}</p>
{{/each}}

I find it easier to teach the basic concepts without Ember Data first. Then people can learn Ember Data later, once their app grows to the point where they need it.

2 Likes
4

Yes, thought I covered that with the XHR example. I added ember-data because the OP originally asked for it.

I would have used fetch in my example but fetch doesn’t work with pretender (ember-cli-mirage) and ember-twiddle doesn’t support other mocking options. That is why I went with jQuery.

Also distilling this to two code samples is awesome-sauce! I’d only add that when apps get larger it helps to place a controller in between the route and template that can rename (alias/reads) the model into a more descriptive name like:

  posts: reads(‘model.responce’),

P.S. Hi ef4! You’re doing great work! I appreciate your take on things.

1 Like
5

Great thanks!!! Good luck to everyone, and inspiration!!!)))))