sharepoint framework call async function

Question

Help please, I'm trying to call the function to get the number of comments from the modern page, but I can not correctly display the result in the html code:

private async getSitePageComments(id: string): Promise<string> {
const currentWebUrl: string = this.context.pageContext.web.serverRelativeUrl;
let req: string = `/_api/web/lists/SitePages/GetItemById(${id})/likedBy`;
const response = await this.context.spHttpClient.get(`${currentWebUrl}${req}`, SPHttpClient.configurations.v1);
const responseJSON = await response.json();
const comments: Comment[] = responseJSON.value;
return comments.length.toString();
} 

private _getListData(listname: string): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/SitePages/Items`, SPHttpClient.configurations.v1)
  .then((response: SPHttpClientResponse) => { debugger; return response.json(); }); }

private _renderListAsync(listname: string): void {

this._getListData(listname)
  .then((response) => {
    this._renderList(response.value, listname);
  });  }

private _renderList(items: ISPList[], listname: string): void {
let html: string = '';
let inwork: number = 0;
let innew: number = 0;
let inclose: number = 0;
let intotal: number = 0;

items.forEach((item: ISPList) => {
   this.getSitePageComments(item["ID"]).then(function (result) {
      html += `<div class="${styles.myDiv1}">Нравиться: ${result}</div>`;
    })   

  if (item.Status == "В работе") {
    inwork++;
    intotal++;
  }
  if (item.Status == "Новое") {
    innew++;
    intotal++;
  }
  if (item.Status == "Завешено") {
    inclose++;
    intotal++;
  }
});

html += `<div class="${styles.myDiv1}">Новых:</div>`;
html += `<div class="${styles.myDiv2}">${innew}</div>`;
html += `<div class="${styles.myDiv1}">В работе:</div>`;
html += `<div class="${styles.myDiv2}">${inwork}</div>`;
html += `<div class="${styles.myDiv1}">Внедрено:</div>`;
html += `<div class="${styles.myDiv2}">${inclose}</div>`;
html += `<div class="${styles.myDiv1}">Всего идей:</div>`;
html += `<div class="${styles.myDiv2}">${listname}</div>`;

const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;  }

public render(): void {
this.domElement.innerHTML = `    
 <div class="${styles.helloWorld}">
 <div class="${ styles.container}"> 
 <b><p class="ms-font-l" style="text-align: left">Статистика</p></b>
 <div id="spListContainer" />
 </div>
</div>
</div>`;     
this._renderListAsync("Авто");  }

Answer 1

Here is the link that should work for you:

https://www.c-sharpcorner.com/article/retrieve-sharepoint-list-items-using-sharepoint-framework-development-model/

Regards,
Chandani Prajapati