async function to render text | emberjs | Page 1

gray vale Mar 8, 2026, 1:36 AM

#

I'm trying to render some text in a attribute for a radio. The function has to be async because it had to do a post request .... currently this is what its outputting (I just printed what its printing in the label on the screen so you can see it)

How can I resolve the promise?

gray vale Mar 8, 2026, 2:01 AM

#

So the library that I'm using .. uses a webworker to generate the mathML markup to speech.. thats why it's in a async

wraith stream Mar 8, 2026, 2:51 AM

#

getPromiseState is a nice utility for this sort of situation
https://reactive.nullvoxpopuli.com/functions/get-promise-state.getPromiseState.html

#

if you're already using warp-drive you can use it's implementation
https://warp-drive.io/api/@warp-drive/ember/functions/getPromiseState

or use <Await /> in the template
https://warp-drive.io/api/@warp-drive/ember/classes/Await

gray vale Mar 8, 2026, 3:05 AM

#

So i don't know if thats going to help me because I'm trying to output to a label

#

I mean attribute

#

actually how do I get the value from the state?

#

this.state.resolved doesn't print anything

wraith stream Mar 8, 2026, 3:08 AM

#

export default class Demo extends Component {
  get state() {
    return getPromiseState(readFromSomewhere);
  }

  <template>
    {{#if this.state.resolved}}
      <input type="radio">  
      <label some-attr={{this.state.resolved}}>Label</label> <-- this is the value
    {{/if}}
  </template>
}

wraith stream Mar 8, 2026, 3:08 AM

#

gray vale this.state.resolved doesn't print anything

it should do :/

gray vale Mar 8, 2026, 3:08 AM

#

Ok one second

#

LOL I was a silly goose of course

wraith stream Mar 8, 2026, 3:09 AM

#

working?

gray vale Mar 8, 2026, 3:11 AM

#

well.. ran into another problem

#

I forgot that i was passing the value to the function as a paramter

wraith stream Mar 8, 2026, 3:11 AM

#

should be fine to do that

#

what trouble are you having?

gray vale Mar 8, 2026, 3:12 AM

#

How do I pass a value to the this.state function

#

should I create a {{ #let somevalue = answer.content}}

#

                        <div class="radio">
                            <label class="d-flex" for={{(concat "question-answer-text-" hi)}}>

 {{#if (fn this.woof.resolved answer.content)}}

                                <Input @type="radio" class="form-check-input" name={{(concat "question-answer-text-" @data._id)}} id={{(concat "question-answer-text-" hi)}} {{on "change"  (fn this.onSelectAnswer answer._id @data._id @data.domainId @catStartDate) }} aria-label={{this.woof.resolved}} />
                           
   
    {{/if}}
                                <div class="question-answer-text">
                                    
                                    <RichRender @data={{answer.content}}></RichRender>          
                                    
                                    {{!-- <Questions::MathjaxContent @content={{(render-html answer.content) }} />  --}}
                                </div> 
                            </label>
                        </div>
                    {{/each}}```

#

so my radio is in a each

#

I'm passing the value from the |answer| to this.woof

#

but this.woof.resolve is there

wraith stream Mar 8, 2026, 3:19 AM

#

simplest way would be to turn it into a component with an arg

eg

export default class RadioOption extends Component {
  @cached
  get promise() {
    return this.doAsyncThing(this.args.answer);
  }

  get state() {
    return getPromiseState(this.promise);
  }

  <template>
    <Input @type="radio" class="form-check-input" aria-label={{if this.state.resolved this.state.resolved ''}} ...attributes />
  </template>
}

{{#each @data.possibleItemAnswers as |answer hi|}}
  <div class="radio">
    <label class="d-flex" for={{(concat "question-answer-text-" hi)}}>

      <RadioOption @answer={{answer}} name={{(concat "question-answer-text-" @data._id)}} id={{(concat "question-answer-text-" hi)}} {{on "change"  (fn this.onSelectAnswer answer._id @data._id @data.domainId @catStartDate) }} />

      <div class="question-answer-text">
        <RichRender @data={{answer.content}}></RichRender>          
      </div> 
    </label>
  </div>
{{/each}}

gray vale Mar 8, 2026, 3:49 AM

#

I think I got it solved

#

You've gotten your self added to the end of the year Christmas gift list thankyou

gray vale Mar 8, 2026, 2:50 PM

#

What library is @cached in ? I can't fidn it

#async function to render text