# Getting JSON data from URL

**URL:** <https://discuss.emberjs.com/t/getting-json-data-from-url/10821>\
**Category:** Ember CLI\
**Created:** [June 1, 2016, 3:48pm UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821 "2016-06-01T15:48:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 1, 2016, 3:48pm UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/1 "2016-06-01T15:48:53Z")

</div>

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 :

> **[Ember Twiddle](https://ember-twiddle.com/#/b9cd8b1b3418d876f88235c4aa99e268?openFiles=templates.pic.hbs%2Ctemplates.components.image-list.hbs1)**
>
> A web-based Ember.js code sharing tool that follows ember-cli's conventions.

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!

---

<div class="post-metadata">

**Author:** ![acorncom](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/acorncom/32/12198_2.png) [@acorncom](https://discuss.emberjs.com/u/acorncom)\
**Post date:** [June 2, 2016, 1:58am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/2 "2016-06-02T01:58:13Z")

</div>

On this page, there are details: [Specifying a Route's Model - Routing - Ember Guides](https://guides.emberjs.com/v2.5.0/routing/specifying-a-routes-model/)

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:

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

```

It’s pretty handy for one-off calls

---

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 2, 2016, 8:16am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/3 "2016-06-02T08:16:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![acorncom](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/acorncom/32/12198_2.png) [@acorncom](https://discuss.emberjs.com/u/acorncom)\
**Post date:** [June 3, 2016, 4:05am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/4 "2016-06-03T04:05:52Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 3, 2016, 7:42am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/5 "2016-06-03T07:42:21Z")

</div>

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](https://ember-twiddle.com/9c97721125a007fa52108ecdf9f72e0d?openFiles=twiddle.json%2Ctemplates.components.image-list.hbs)

---

<div class="post-metadata">

**Author:** ![Myrdhin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/myrdhin/32/16107_2.png) [@Myrdhin](https://discuss.emberjs.com/u/Myrdhin)\
**Post date:** [June 3, 2016, 9:42am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/6 "2016-06-03T09:42:41Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 3, 2016, 9:46am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/7 "2016-06-03T09:46:02Z")

</div>

Perfect! You totally saved me.

---

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 3, 2016, 10:06am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/8 "2016-06-03T10:06:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Myrdhin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/myrdhin/32/16107_2.png) [@Myrdhin](https://discuss.emberjs.com/u/Myrdhin)\
**Post date:** [June 3, 2016, 10:43am UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/9 "2016-06-03T10:43:08Z")

</div>

You should use Ember-data and customize your [adapter](https://guides.emberjs.com/v2.5.0/models/customizing-adapters/) and [serializer](https://guides.emberjs.com/v2.5.0/models/customizing-serializers/).

---

<div class="post-metadata">

**Author:** ![hbc](https://avatars.discourse-cdn.com/v4/letter/h/f14d63/32.png) [@hbc](https://discuss.emberjs.com/u/hbc)\
**Post date:** [June 3, 2016, 12:26pm UTC](https://discuss.emberjs.com/t/getting-json-data-from-url/10821/10 "2016-06-03T12:26:48Z")

</div>

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