Getting JSON data from URL

Ember CLI
1

Hello, I normally get data from a service I created, a hard-coded JSON. But I need to take the JSON from an URL.

This is my twiddle :

How can I add a URL as a source instead of calling it from the service ‘pics’? I tried something but got errors and couldn’t do anything. I’m very new at this.

Thanks!

2

On this page, there are details: Specifying a Route's Model - Routing - Ember Guides

It’s not specifically shown, but is just discussed in passing in this text:

Typically, the model hook should return an Ember Data record, but it can also return any promise object (Ember Data records are promises), or a plain JavaScript object or array. Ember will wait until the data finishes loading (until the promise is resolved) before rendering the template.

Which means you can do this:

model() {
   return $.get('/your-url');
}

It’s pretty handy for one-off calls

1 Like
3

Thanks for the response @acorncom , but this is what I tried before. I got this error :

Mirage: Your Ember app tried to GET 'my URL', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?

Also I used return $.getJSON not return $.get.

About the error, I’m not really using mirage, I just created it at the beginning thinking I would use it but then I didn’t, when I delete the folder I get an error though. What am I supposed to do now? I tried to add things to the mirage’s config.js like

export default function() {

    this.urlPrefix = 'http://localhost:4200';
    this.namespace = '';

    this.get('my url'); 
}

Not sure what I must do.

EDIT: I deleted what I wrote into the config file and changed index.js with this:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        this.get('my Json url', () => {
            return [];
        });
    }
});

Now I don’t get any error on Chrome devTools but I see a complete blank page. I guess I need to fix the .hbs file which is currently like this:

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}    
     <p class="info">{{pic.Title}}</p><br/>
     <img src={{pic.Image}} width="300">
  {{/link-to}}</div>
{{/each}}
{{yield}}

Any ideas?

4

If you aren’t using Mirage at all, then I would delete it from your package.json file and remove the ember-cli-mirage folder from your npm_modules folder. That should then lead to your code working.

If you want to use Mirage for some routes, then you can setup a passthrough for some urls (details on the Mirage site).

5

I deleted it, but still I see a blank page with no errors. I can’t find out why. This is my new twiddle with the $.getJSON() function, can you please check it ? You can see it is all blank. It doesn’t fix it if I use https:// instead of http:// . Ember Twiddle

6

Hello,

In your index.hbs, use : {{image-list model=model.Data currentPos=currentPos }}

You do not need models/*.js because you don’t use Ember-data when you get model() in your IndexRoute. And i think you should use http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=0&pageSize=15’ and not https://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=0&pageSize=15 : https do not respond…

1 Like
7

Perfect! You totally saved me.

8

@Myrdhin But there is a problem with that, It doesn’t work if I open link in a new tab :confused: I can’t get the model hook I guess. How can I fix it?

9

You should use Ember-data and customize your adapter and serializer.

10

I checked the documentation , I guess I don’t need a serialization because the URL has the proper JSON data , but, I created an adapter called application, and wrote the URL in it like that :

import JSONAPIAdapter from 'ember-data/adapters/json-api';

export default JSONAPIAdapter.extend({

    model(params){
    
       return $.getJSON('http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=0&pageSize=15',params.NewsUrl);
    
    }
});

Nothing has changed. There is no more info in the docs about adapters… I dont get the ember-data part, I never used it before. Also, should I bring back the models/ folder back for that? Because I deleted it according to your previous post. @Myrdhin