Strategies for Ensuring Ember JS Waits for Asynchronous Functions to Respond Prior to Rendering

Currently, I'm tackling a project that came to the company through an outsourced channel. My query concerns the rendering of an image src.

In the past, images were served from the filesystem. However, we've now transitioned to using AWS S3 bucket serving and cloudfront caching. We aim to send a URL from backend to frontend for image rendering.

In my model, there's a function that fetches the image URL from the backend and returns it. But during the rendering process, the image src ends up being set as [object Object], presumably setting it to the function instead of the response.

Below is the function responsible for retrieving the URL:

baseUrl: Ember.computed(async function () {
let adapter = this.store.adapterFor('article-image');
let ajax = this.get('ajax');

let path = ''

let API_URL = `${adapter.buildURL('article-image', this.id)}/original/${this.get('fileName')}`;
let promise = new Promise((resolve, reject) => {
  ajax.request(API_URL, {
    method: 'GET'
  })
    .then(function (response) {
      resolve(response.path);
    })
    .catch(function (err) {
      console.log('error');
      console.log(err);
    });
})
path = await promise
return path;
}),

And here's where we call image.baseUrl, resulting in the src displaying as [object Object]:

{{lazy-image
url=(concat image.baseUrl)
alt=(if title title (if image.title image.title 'Image'))
class=(if class class 'img-responsive')}}

Answer №1

When dealing with computed properties, it's important to remember that returning a promise is returning an object, not a string.

Typically, we don't wait for the promise to resolve before rendering our component. Instead, we usually render something like a loading spinner initially and then update the image once the promise is fulfilled.

There are two common solutions to this issue. One option is to utilize a PromiseProxy within your computed property.

return Ember.ObjectProxy.extend(Ember.PromiseProxyMixin).create({ promise });

You can incorporate code similar to this in your template:

{{#if image.baseUrl.isPending}}
  <img src="loading.gif">
{{else}}
  {{lazy-image url=(concat image.baseUrl.content) ...}}
{{/if}}

For more information, check out

The other common approach is to explore using ember-concurrency instead of relying on computed properties that return promises. This method involves rewriting your code to have a more imperative structure.

To learn more, visit

In my experience, I prefer the latter solution as managing promise proxies can become complex and harder to grasp.

If you're working with a newer version of Ember (2.10 or above), you might consider trying out ember-lifeline. It requires less additional code compared to ember-concurrency and offers a simpler API that may be sufficient for your needs. Based on your provided code snippet, it seems like you're using an older Ember version but with modern browsers. Check out

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to troubleshoot an error - Invalid key Token '{' found at column 2

I am encountering a debugging issue that I can't seem to resolve. form-field.html <div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }"> <label cla ...

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

I am looking to create a custom directive that will replace all occurrences of 'cx' with <strong>cx</strong> in the Dom Tree. Here is my current approach: Vue.config.productionTip = false function removeKeywords(el, keyword){ i ...

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

Using openssl stream with node.js

I am facing an issue with my server running on TLS 1.0. Whenever I run the command below, it keeps giving me an endless stream of data on the terminal: ~$ openssl s_client -connect 'serveraddress':5000 The output is a real-time XML data stream ...

What is the purpose of housing frontend frameworks on NPM?

As I explore various github projects and tutorials, I often come across frontend frameworks listed as dependencies in the package.json file. This confuses me. I always thought Node.js was primarily for backend development. My understanding is that frontend ...

Building vue js logic to manage state across multiple ul li elements

I have a situation where I have an unordered list with a static number of list items (menu elements) that are rendered on the server side. I need to add some state-based logic to each list item, such as changing the color of the active item and expanding ...

The filtering feature for array and model selection in Angular's UI-Select appears to be malfunctioning

Below is a Json structure: $scope.people = [ { name: 'Niraj'}, { name: 'Shivam'}, { name: 'Arun'}, { name: 'Mohit'}] There's also a variable, var array = "Niraj,Shivam";. My goal is to filter out the names fro ...

Javascript navigation menu failing to accurately display all pages

As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...

Using Firestore startAt() with Redux: a comparison of serializable and non-serializable scenarios

I find myself at a pivotal moment in my Firebase project and am seeking some general guidance. Here are the key points as I have gathered them through my research: When it comes to Firestore queries, there is a useful feature for pagination called startAt ...

Saving the Chosen Option from Button Group into react-hook-form State

Struggling to save the chosen value from MUI Button Group into react-hook-form's state, but encountering challenges with the update not happening correctly. view codesandbox example Below is a simplified version of my code: import { ButtonGroup, But ...

RS256 requires that the secretOrPrivateKey is an asymmetric key

Utilizing the jsonwebtoken library to create a bearer token. Following the guidelines from the official documentation, my implementation code appears as below: var privateKey = fs.readFileSync('src\\private.key'); //returns Buffer let ...

Retrieve data from a MongoDB database using Mongoose and showcase it on a single page with ExpressJS

This marks my initiation into the world of web development, as I embark on my first project using ExpressJS and MongoDB. My objective is to click a button on the view page and retrieve specific data from the database (MongoDB) to display the content just a ...

Sidebar-driven top navigation menu

I am currently developing a Single Page Application using VueJS along with vuerouter. In my App.vue file, the structure is as follows: <template> <div id="app"> <header><topbar></topbar></header> <div cl ...

Combining React with a jQuery plugin

Utilizing the jQuery nestable plugin in my React App has been a lifesaver for meeting my business needs. Despite being aware of the potential complications that arise from mixing jQuery with React, I couldn't find the exact functionality I required in ...

What is the most efficient method for sending query parameters through a URL in Vue.js with Axios?

My goal is to use Axios upon page load to retrieve a JSON object from the base URL. When a button is clicked, I want to append query parameters to the URL and fetch a different JSON object. For example, if the base URL is 'test.com', clicking the ...

Display only the relevant search results using ng-show in AngularJS

By utilizing the code below, I am able to filter results where all entries are displayed on the page: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name: ...

How to exit an ASP.NET application by pressing the exit button

I am new to asp.net and currently using Visual Studio 2012. Currently, I am working on a login page where I have two buttons: Login and Exit. Whenever I click on the Exit button, I want the application to close and also stop the debugging process. I cam ...

Error message: "The term 'Outlet' is not recognized in react-router version 6.4"

What is the proper way to define the Outlet component in react-router version 6.4? Below is a code snippet: function Layout() { return ( <div> <Navbar /> <Outlet /> <Footer /> </div> ); } ...

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...