Retrieve a JSON from SAILS

Ember Data
1

Hi everybody, Here is my situation, I am using Sane Stack a CLI that works with Eember.js and Sails.js, I am creating a web application that interacts with the JIRA REST Api, here is a scheme to illustrate what I am trying to explain :

As the shown in the scheme above, the architecture of my web application is as follows, my Sails backend communicate with external API and retrieve data from it (e.g. Jira API) and I want my Ember client to get this data from Sails.

Indeed, I can get my JSON from the external API Sails side, in my browser I can display the retrieved JSON with this URL: http://127.0.0.1:1337/projects. In the Ember side, I tried to get this JSON in my project-view component:

import Ember from 'ember';
export default Ember.Component.extend({

        model(){
        console.log("here we go !");
        return Ember.$.getJSON('http://127.0.0.1:1337/api/v1/projects');
        }
});

But it returns nothing (Checked with the Ember Inspector), Am I doing it wrong ? can someone help me please ?

2

It is hard to say, but my guesses;

  • your ember models are not set up correctly
  • the JSON you retrieve is not formatted correctly (By correctly I mean not the way Ember Data expects it)

Pls post both of them.

1 Like
3

It looks like you are trying to load data in a component, but this is normally done in the route:

// app/router.js
Router.map(function() {
  this.route('projects');
});

// app/routes/projects.js
export default Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('http://127.0.0.1:1337/api/v1/projects');
  }
});

This will expose the model data in the template as model and you can pass that into your component {{display-projects projects=model}}.

You can read more about loading model data via the route in the Routing Guides.

1 Like
4

Thank you for the reply, so I don’t need to create a model “projects” that matches with the JSON attributes, right ?

I tried you suggestion but it dosen’t seem to work : “Error while processing route: projects” It occur once I try to diplay my Projects

5

Here is the JSON structure :

[
    {
        "expand": "description,lead,url,projectKeys",
        "self": "https://jira.company.com/rest/api/2/project/10208",
        "id": "112366",
        "key": "CTA",
        "name": "CustApp",
        "avatarUrls": {
            "48x48": "https://jira.company.com/secure/projectavatar?avatarId=10011",
            "24x24": "https://jira.company.com/secure/projectavatar?size=small&avatarId=10011",
            "16x16": "https://jira.company.com/secure/projectavatar?size=xsmall&avatarId=10011",
            "32x32": "https://jira.company.com/secure/projectavatar?size=medium&avatarId=10011"
        }
    }
]

Using SANE stack Sails knows how Ember is expecting Data so he send the correct format.

and here is my model :

import DS from 'ember-data';

export default DS.Model.extend({
  expand: DS.attr('string'),
  self: DS.attr('string'),
  id: DS.attr('number'),
  key: DS.attr('string'),
  name: DS.attr('string'),
  avatars: DS.attr('string')
});
6

I don’t have a lot of experience with SANE stack but I do think that it uses Ember Data by default, and therefore it might be useful to set up a project model with the relevant attributes. See the Model Guides.

Then you could use this.store.find('project') in place of getJSON.

Maybe @mgenev can give you a few pointers.