How to get item from model array in helper

Ember Data
1

Hello, I have a model lets say it property(estate) and it has relation oneToMany for model Images, so at the listing screen I need only one image for preview and I’m trying to pass images into helper get-cover and return first object from the array.

import { helper } from ‘@ember/component/helper’;

export function getCover([images]) { console.log(images.get(1)) return images.firstObject.image;

}

export default helper(getCover);

image property contents url on image, but it doesnt work

But if I’m doing with {{#each this.property.images as |image|}} in template everything is ok and it shows 3 images but how can I get only one for preview?

thank you in advance

2

Assuming these are ember data relationships, the template is dealing with asynchrony for you. To do the same in JavaScript you need to do it yourself.

There are a few different options. You can make a helper that updates itself when the promise for the related data resolves. That involves upgrading it from just a function to a Helper class.

You could change your relationship to make it synchronous, and then your existing helper would work. But you then need to make absolutely sure that you’re preloading the relationship any time you might be using it.

3

Hmm, ok, but how to turn relations into sync style. Or even can you advise me what’s the best option in my case. model Property → has many → images and on listing page I need only one for preview.

4

For the synchronous relationships option, see https://embermap.github.io/ember-data-storefront/docs/guides/working-with-relationships#avoiding-async-relationships and The case against async relationships in Ember Data | EmberMap

For helpers that can update themselves, see https://guides.emberjs.com/release/templates/writing-helpers/#toc_class-based-helpers

In either case, loading the whole list just to grab the first item is less-than-ideal. If possible, it would be better to reorganize your backend so that the cover image is available as a separate belongsTo relationship. Otherwise consider that a homepage with previews of many Properties will actually load models for every photo for every Property, even though you’re only showing one of each.