How to handle non-model data in ember

I want to retrieve tabular data related to a model and display it in a table.
I am not sure how to do that in ember. Here is what I tried :

I added a get action on my API that return a json with the data

model_path:idrelated_data

I added a custom action to the model :

allShares: modelAction('all_shares',{type: 'GET'})

ANd here is how I add it to the route's model :

allShares: invoice.then((i)=>{return i.allShares()})

Now I have a model.allShares that should contain the data. In the network inspector I can see that there has been a query to the endpoint returning the JSON data I want to display.

The following code in the view is totally blank :

{{#each model.allShares as |elem index|}}

  {{elem}}

  {{index}}

{{/each}}

I can now see a big object in the inspector (using debugger in model()) and I am not sure what to do of it, or even what type of object is it.

What can I do now to display the data in my view ?

EDIT :

{{log model.allShares}} ~~is blank~~
Ok, I did not knew log was for the console.
It display the object with the data from the JSON.I should now find how to use the data in the view.

{{model.allShares}} return [object Object]

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

2

what is modelAction? Honestly I would just manually fetch the stuff in the route. What happens if you do {{log model.allShares}} in the template or just {{model.allShares}}?

– Lux
Nov 22 '18 at 10:16

WHere can I find info on fetch in Ember?

– Syl
Nov 22 '18 at 10:22

1

what's the value of model when you {{log model}}?

– NullVoxPopuli
Nov 22 '18 at 10:58

3

log model is blank, but you're displaying model data? that doesn't seem right. {{log model}} should show everything in the console so that you can further debug, and check your logic vs what the data actually is.

– NullVoxPopuli
Nov 22 '18 at 16:03

1

You can use ember-fetch however the fetch API itself is not part of ember but standard JS.

– Lux
Nov 22 '18 at 18:07

|
show 3 more comments

I want to retrieve tabular data related to a model and display it in a table.
I am not sure how to do that in ember. Here is what I tried :

I added a get action on my API that return a json with the data

model_path:idrelated_data

I added a custom action to the model :

allShares: modelAction('all_shares',{type: 'GET'})

ANd here is how I add it to the route's model :

allShares: invoice.then((i)=>{return i.allShares()})

Now I have a model.allShares that should contain the data. In the network inspector I can see that there has been a query to the endpoint returning the JSON data I want to display.

The following code in the view is totally blank :

{{#each model.allShares as |elem index|}}

  {{elem}}

  {{index}}

{{/each}}

I can now see a big object in the inspector (using debugger in model()) and I am not sure what to do of it, or even what type of object is it.

What can I do now to display the data in my view ?

EDIT :

{{log model.allShares}} ~~is blank~~
Ok, I did not knew log was for the console.
It display the object with the data from the JSON.I should now find how to use the data in the view.

{{model.allShares}} return [object Object]

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

2

what is modelAction? Honestly I would just manually fetch the stuff in the route. What happens if you do {{log model.allShares}} in the template or just {{model.allShares}}?

– Lux
Nov 22 '18 at 10:16

WHere can I find info on fetch in Ember?

– Syl
Nov 22 '18 at 10:22

1

what's the value of model when you {{log model}}?

– NullVoxPopuli
Nov 22 '18 at 10:58

3

log model is blank, but you're displaying model data? that doesn't seem right. {{log model}} should show everything in the console so that you can further debug, and check your logic vs what the data actually is.

– NullVoxPopuli
Nov 22 '18 at 16:03

1

You can use ember-fetch however the fetch API itself is not part of ember but standard JS.

– Lux
Nov 22 '18 at 18:07

|
show 3 more comments

I want to retrieve tabular data related to a model and display it in a table.
I am not sure how to do that in ember. Here is what I tried :

I added a get action on my API that return a json with the data

model_path:idrelated_data

I added a custom action to the model :

allShares: modelAction('all_shares',{type: 'GET'})

ANd here is how I add it to the route's model :

allShares: invoice.then((i)=>{return i.allShares()})

Now I have a model.allShares that should contain the data. In the network inspector I can see that there has been a query to the endpoint returning the JSON data I want to display.

The following code in the view is totally blank :

{{#each model.allShares as |elem index|}}

  {{elem}}

  {{index}}

{{/each}}

I can now see a big object in the inspector (using debugger in model()) and I am not sure what to do of it, or even what type of object is it.

What can I do now to display the data in my view ?

EDIT :

{{log model.allShares}} ~~is blank~~
Ok, I did not knew log was for the console.
It display the object with the data from the JSON.I should now find how to use the data in the view.

{{model.allShares}} return [object Object]

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

I want to retrieve tabular data related to a model and display it in a table.
I am not sure how to do that in ember. Here is what I tried :

I added a get action on my API that return a json with the data

model_path:idrelated_data

I added a custom action to the model :

allShares: modelAction('all_shares',{type: 'GET'})

ANd here is how I add it to the route's model :

allShares: invoice.then((i)=>{return i.allShares()})

Now I have a model.allShares that should contain the data. In the network inspector I can see that there has been a query to the endpoint returning the JSON data I want to display.

The following code in the view is totally blank :

{{#each model.allShares as |elem index|}}

  {{elem}}

  {{index}}

{{/each}}

I can now see a big object in the inspector (using debugger in model()) and I am not sure what to do of it, or even what type of object is it.

What can I do now to display the data in my view ?

EDIT :

{{log model.allShares}} ~~is blank~~
Ok, I did not knew log was for the console.
It display the object with the data from the JSON.I should now find how to use the data in the view.

{{model.allShares}} return [object Object]

ember.js tabular

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

edited Nov 22 '18 at 11:23

asked Nov 22 '18 at 10:07

Syl

1,73252852

asked Nov 22 '18 at 10:07

Syl

1,73252852

asked Nov 22 '18 at 10:07

Syl

1,73252852

2

what is modelAction? Honestly I would just manually fetch the stuff in the route. What happens if you do {{log model.allShares}} in the template or just {{model.allShares}}?

– Lux
Nov 22 '18 at 10:16

WHere can I find info on fetch in Ember?

– Syl
Nov 22 '18 at 10:22

1

what's the value of model when you {{log model}}?

– NullVoxPopuli
Nov 22 '18 at 10:58

3

log model is blank, but you're displaying model data? that doesn't seem right. {{log model}} should show everything in the console so that you can further debug, and check your logic vs what the data actually is.

– NullVoxPopuli
Nov 22 '18 at 16:03

1

You can use ember-fetch however the fetch API itself is not part of ember but standard JS.

– Lux
Nov 22 '18 at 18:07

|
show 3 more comments

2

what is modelAction? Honestly I would just manually fetch the stuff in the route. What happens if you do {{log model.allShares}} in the template or just {{model.allShares}}?

– Lux
Nov 22 '18 at 10:16

WHere can I find info on fetch in Ember?

– Syl
Nov 22 '18 at 10:22

1

what's the value of model when you {{log model}}?

– NullVoxPopuli
Nov 22 '18 at 10:58

3

log model is blank, but you're displaying model data? that doesn't seem right. {{log model}} should show everything in the console so that you can further debug, and check your logic vs what the data actually is.

– NullVoxPopuli
Nov 22 '18 at 16:03

1

You can use ember-fetch however the fetch API itself is not part of ember but standard JS.

– Lux
Nov 22 '18 at 18:07

what is modelAction? Honestly I would just manually fetch the stuff in the route. What happens if you do {{log model.allShares}} in the template or just {{model.allShares}}?

– Lux
Nov 22 '18 at 10:16

WHere can I find info on fetch in Ember?

– Syl
Nov 22 '18 at 10:22

what's the value of model when you {{log model}}?

– NullVoxPopuli
Nov 22 '18 at 10:58

log model is blank, but you're displaying model data? that doesn't seem right. {{log model}} should show everything in the console so that you can further debug, and check your logic vs what the data actually is.

– NullVoxPopuli
Nov 22 '18 at 16:03

You can use ember-fetch however the fetch API itself is not part of ember but standard JS.

– Lux
Nov 22 '18 at 18:07

|
show 3 more comments

1 Answer
1

active

oldest

votes

Based off the question it appears you are trying to load a relationship for a model. A very simple way to this is by including that relationship in the model it self.

Model Blog JSON:

{ 

    "id": 1,

    "name": "foo",

    "links": {

        "authors": "/api/blogs/1/authors"

    }

}

Ember Model Blog:

export default DS.Model.extend({

    name: DS.attr('string'),

    authors: DS.hasMany('author'),

});

This is an example of a blog model with a "hasMany" relationship to authors. When this is loaded into ember data, ember will now use that route instead of trying to call the relationship one by one or with an "ids" request (depending on your serializer config)

This will also be called when trying to be used in a template.

I usually find this to be better than using custom methods on models. I only resort to that when I absolutely have too. It's better to work with Ember data rather than against it.

Resources:

https://thejsguy.com/2016/02/21/handling-nested-resources-in-ember-data.html

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

1

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428455%2fhow-to-handle-non-model-data-in-ember%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Based off the question it appears you are trying to load a relationship for a model. A very simple way to this is by including that relationship in the model it self.

Model Blog JSON:

{ 

    "id": 1,

    "name": "foo",

    "links": {

        "authors": "/api/blogs/1/authors"

    }

}

Ember Model Blog:

export default DS.Model.extend({

    name: DS.attr('string'),

    authors: DS.hasMany('author'),

});

This will also be called when trying to be used in a template.

I usually find this to be better than using custom methods on models. I only resort to that when I absolutely have too. It's better to work with Ember data rather than against it.

Resources:

https://thejsguy.com/2016/02/21/handling-nested-resources-in-ember-data.html

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

1

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

add a comment |

Based off the question it appears you are trying to load a relationship for a model. A very simple way to this is by including that relationship in the model it self.

Model Blog JSON:

{ 

    "id": 1,

    "name": "foo",

    "links": {

        "authors": "/api/blogs/1/authors"

    }

}

Ember Model Blog:

export default DS.Model.extend({

    name: DS.attr('string'),

    authors: DS.hasMany('author'),

});

This will also be called when trying to be used in a template.

I usually find this to be better than using custom methods on models. I only resort to that when I absolutely have too. It's better to work with Ember data rather than against it.

Resources:

https://thejsguy.com/2016/02/21/handling-nested-resources-in-ember-data.html

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

1

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

add a comment |

Based off the question it appears you are trying to load a relationship for a model. A very simple way to this is by including that relationship in the model it self.

Model Blog JSON:

{ 

    "id": 1,

    "name": "foo",

    "links": {

        "authors": "/api/blogs/1/authors"

    }

}

Ember Model Blog:

export default DS.Model.extend({

    name: DS.attr('string'),

    authors: DS.hasMany('author'),

});

This will also be called when trying to be used in a template.

I usually find this to be better than using custom methods on models. I only resort to that when I absolutely have too. It's better to work with Ember data rather than against it.

Resources:

https://thejsguy.com/2016/02/21/handling-nested-resources-in-ember-data.html

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

Based off the question it appears you are trying to load a relationship for a model. A very simple way to this is by including that relationship in the model it self.

Model Blog JSON:

{ 

    "id": 1,

    "name": "foo",

    "links": {

        "authors": "/api/blogs/1/authors"

    }

}

Ember Model Blog:

export default DS.Model.extend({

    name: DS.attr('string'),

    authors: DS.hasMany('author'),

});

This will also be called when trying to be used in a template.

I usually find this to be better than using custom methods on models. I only resort to that when I absolutely have too. It's better to work with Ember data rather than against it.

Resources:

https://thejsguy.com/2016/02/21/handling-nested-resources-in-ember-data.html

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

answered Nov 26 '18 at 17:13

Joe Hartzell

34029

1

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

add a comment |

1

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

This is the correct answer, especially where you have control over your API responses. If you ever do not, look into using something like ember-ajax or ember-fetch services to request specific data. This should only be used when ABSOLUTELY NECESSARY though, and you should do everyhting you can to keep critical data in the model ecosystem.

– Kevin
Feb 21 at 4:38

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu