Render relationship data

Ember Data
1

Hi, I’m trying to render a model in a component, but isn’t working very well.

Here is my component:

{{#each model as |geopoint|}}
    <li>
        Name: {{geopoint.name}}
        <br/>
        Related data: {{geopoint.proceso}}
        {{#each proceso in geopoint.proceso}}
            Related data name: {{proceso.name}}
        {{/each}}
    </li>
{{/each}}

And this is rendered:

Name: Andrew
Related data: <DS.PromiseObject:ember468>

Ember gets the data of both objects from server

Here are the models:

import DS from 'ember-data';

var GeoPoint = DS.Model.extend(
    {
	name: DS.attr('string'),
	description: DS.attr('string'),
	neighborhood: DS.attr('string'),
	temporarySolution: DS.attr('string'),
	latitude: DS.attr('number'),
	longitude: DS.attr('number'),
	proceso: DS.belongsTo('proceso', {async: true})
        }
    );

export default GeoPoint;

import DS from 'ember-data';

var Proceso = DS.Model.extend(
{
	status: DS.attr('number'),
	name: DS.attr('string'),
	code: DS.attr('string'),
	geopoints: DS.hasMany('geopoint')
	/*proposalMakingDeadline: DS.attr('date'),
	 proposalRatingDeadline: DS.attr('date'),
	 proposalVotingDeadline: DS.attr('date')*/
}
);

export default Proceso;

Why I have to do to render model relationship data? Thank you

2

Hi.
Why are you looping inside proceso? As it’s described now, it seems to be a one-to-one relationship, while proceso seems to have hasMany geopoint.

Regarding the template rendering, try this:

{{#each model as |geopoint|}}
    <li>
        Name: {{geopoint.name}}
        <br/>
        Related data:</br>
        Related data name: {{geopoint.proceso.name}}
    </li>
{{/each}}

Let us know if it works!

1 Like