How to get the value from toPromise() in angular?

Question

I am making angular application in which i am making a service call as like,

let newValue =  this.dynamicService.getRest(element.optionsUrl,localStorage.getItem('token')).toPromise();

and console.log(newValue) gives,

{"__zone_symbol__state":null,"__zone_symbol__value":[]}

Here i need to store the value from the service to the variable newValue.

If use toPromise.then.toPromise().then(function (result) { }) also i am getting the same result.

Kindly help me to store the values of the service with toPromise() to the variable newValue..

Edit:

Constructor:

  constructor(private http: HttpClient, private dynamicService: NgiDynamicFormsService) {
    this.newArray = AppConfig.settings.template.templateFormJSON;
  }

Async getQuestions()

          async  getQuestions() {

            let questions: any = [];

            this.newArray.forEach(element => {
          if (element.elementType === 'textbox') {
            questions.push(new TextboxQuestion(element));
          } else if (element.elementType === 'dropdown') {
                let newValue =  await this.dynamicService.getRest(element.optionsUrl,localStorage.getItem('token')).toPromise();
    element.options = newValue;
    questions.push(new DropdownQuestion(element));
            } else if (element.elementType === 'textarea') {
            questions.push(new TextareaQuestion(element));
          } else if (element.elementType === 'checkbox') {
            questions.push(new CheckboxQuestion(element));
          }
            });
return questions.sort((a, b) => a.order - b.order);
  }

Here you can see that after getting the newValue i need to sends the values in the newValue to the element.options.. And later on i need to call questions.push(new DropdownQuestion(element)); for this one, i am unable to get the value in newValue and so the questions.push(new DropdownQuestion(element)) is giving empty values so after storing the value in newValue, i need to call this one, questions.push(new DropdownQuestion(element))

I need to make this call inside forEach function, so if i use await, it gives error IDE as,

[ts] 'await' expression is only allowed within an async function...

Answer 1

To read promise value, use chainable .then operator.

let newValue =  this.dynamicService.getRest(element.optionsUrl,localStorage.getItem('token')).toPromise();

newValue.then((value)=>console.log(value));

You can also use aynsc/await

async func(){
   let newValue =  await this.dynamicService.getRest(element.optionsUrl,localStorage.getItem('token')).toPromise();
}

----Promise.all----

async  getQuestions() {

    let questions: any = [];
    let questionsPromise: any = [];
    let questionsPromiseResult: any = [];
    this.newArray.forEach(element => {
       if (element.elementType === 'textbox') {
          questions.push(new TextboxQuestion(element));
       } else if (element.elementType === 'dropdown') {
        questionsPromise.push( this.dynamicService.getRest(element.optionsUrl,localStorage.getItem('token')).toPromise());
        questionsPromiseResult.push(element);
      } else if (element.elementType === 'textarea') {
        questions.push(new TextareaQuestion(element));
      } else if (element.elementType === 'checkbox') {
        questions.push(new CheckboxQuestion(element));
      }
    });

    Promise.all(questionsPromise).then(results =>{
       results.forEach(item,index=>{
          let element = this.questionsPromiseResult[index];
          element.options = item;
          questions.push(new DropdownQuestion(element));
       });
    });