Fetch data in angular

Question

this is my service

import { Injectable } from '@angular/core';
import { GenericPostService } from 'app/shared/services/generic.post.service';

@Injectable({
   providedIn: 'root'
 })
    export class FaqService {

  constructor(
     private readonly genericPostService: GenericPostService
   ) { }

   async getFaqContent() {
     return this.genericPostService.post('faq', 'getFAQContent');
  }

}

this is my component

import { Location, ViewportScroller } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FaqService } from '@myse/faq/faq.service';
import { Subscription } from 'rxjs';

@Component({
 providers: [Location],
 selector: 'myse-faq',
 styleUrls: ['./faq.component.scss'],
templateUrl: './faq.component.html'
})
export class FaqComponent implements OnInit, OnDestroy {
 faqSectionList: any;
 subscription: Subscription;

 gotoPageWithRank: any;
 gotoPagedivWithRank: any;
 identifylink: any;
 rank: any;
 divName: any;

 FAQSubsectionDisplayBean = {


 }


 constructor(
  private readonly faqservice: FaqService,
  private readonly router: Router,
  private readonly route: ActivatedRoute,
  private readonly viewportScroller: ViewportScroller
 ) { }

async ngOnInit() {
   this.faqSectionList = this.faqservice.getFaqContent();
 }

   ngOnDestroy() {
   this.subscription.unsubscribe();
}

gotoPageDiv() {

    window.scroll({
    top: 0,
    left: 0,
    behavior: 'auto'
  })

}

  gotoPagedivwithRank(elementId: any): void {
  this.viewportScroller.scrollToAnchor(elementId);

}
  gotoPageDivWithURL(url) {
  this.divName = String(url);
}

  identifyLink(link) {
   if (link == null) {
    this.identifylink = null;
    return this.identifyLink;
    } else {
      if (link.substring(0, 3) === 'faq') {
        this.rank = link.substring(3);
    } else {
      this.identifylink = null;
      return this.identifylink;
    }
  }
}

}

this is my template code

            <div id="wrap-content-v1"
     class="wrap-content">
<div class="main">
    <div>
        <div id="summary">
            <span [innerHTML]="'tk.faq.summaryPageTitle' | translateHTML"
                        id="faq_title"
                        class="faq_title">
            </span><br>
            <span [innerHTML]="'tk.faq.summaryPageSubtitle' | translateHTML"
                        id="faq_subtitle"
                        class="faq_subtitle">
            </span>
            <br>
            <br>
            <div id="faqSummaryList{{faqSection.rank}}"
                     *ngFor="let faqSection of faqSectionList">
                <div *ngIf="faqSection.summaryTitle!==null && faqSection.summaryTitle.length>0"
                         class="faq_textBullet"
                         id="faqSummaryDisplay{{faqSection.rank}}">
                    <font color="#B10043">
                        <a (click)="gotoPagedivwithRank('faqSection.rank')"
                             class="faq_summaryTitle"
                             id="faqSummary{{faqSection.rank}}"
                             onmouseover=""
                             style="cursor: pointer;">
                            <span id="faqSummaryValue{{faqSection.rank}}">{{faqSection.summaryTitle}}</span></a></font>
                </div>
            </div>
        </div>
        <br>
        <div *ngFor="let faqSection of faqSectionList"
                 id=" ">
            <div *ngFor="let faqSubsection of faqSection.faqSubsectionList"
                     id="">
                <div *ngIf="faqSubsection.type==='Title'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Title">
                    <span class="faq_title"
                                id="faq_subtitle">{{faqSubsection.text}}
                    </span><br> <br>
                </div>
                <div *ngIf="faqSubsection.type==='Subtitle'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Subtitle">
                    <span class="faq_subtitle"
                                id="faq_subtitle">{{faqSubsection.text}}
                    </span><br>
                    <br>
                </div>
                <div *ngIf="faqSubsection.type==='Text'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Text">
                    <span class="faq_text"
                                id="faq_text">{{faqSubsection.text}}</span><br>
                </div>
                <div *ngIf="faqSubsection.type==='TextWithBullet'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_TextWithBullet">
                    <span class="faq_textBullet"
                                id="faq_textBullet"><span class="faq_textWithBullet"
                                    id="faq_textWithBullet">{{faqSubsection.text}}</span></span>
                </div>
                <div *ngIf="faqSubsection.type==='Image'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Image">
                    <img class="faq_image"
                             id="faq_image"
                             src="faqSubsection.Image"
                             alt="image" /><br>
                    <br>
                </div>
                <div *ngIf="faqSubsection.type==='Link' && identifyLink(faqSubsection.linkURL)===null"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_ExternalLink">
                    <font color="#B10043"><a href="{{faqSubsection.linkURL}}"
                             id="faq_external_link"><span class="faq_link"
                                        id="faq_link">{{faqSubsection.text}}</span></a></font><br>
                </div>
                <div *ngIf="faqSubsection.type==='Link' && identifyLink(faqSubsection.linkURL)!==null"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_InternalLink">
                    <font color="#B10043"><a id="gotoPageDivWithURL"
                             (click)="gotoPageDivWithURL(faqSubsection.linkURL)"
                             onmouseover=""
                             style="cursor: pointer;"><span class="faq_link"
                                        id="faq_link">{{faqSubsection.text}}</span></a></font><br>
                </div>
                <div *ngif="faqSubsection.type==='Item'"
                         id="faq{{faqSection.rank}}_{{faqSubsection.rank}}_Item">
                    <span class="faq_itemBullet"
                                id="faq_itemBullet"><span class="faq_item"
                                    id="faq_item">{{faqSubsection.text}}</span></span>
                </div>
            </div>
            <br><br> <a (click)="gotoPageDiv()"
                 class="goToHomeFAQ"
                 id="goToHomeFAQ{{faqSection.rank}}"
                 onmouseover=""
                 style="cursor: pointer;"></a><br>
            <br>
        </div>
    </div>
</div>

these are the codes i am not able to fetch the data can you guys please help out been struggling for days now!! I want to create an Faq page and the service call api is from a java bean....................................................................................

I'm not quiet sure what you want to do here?! It looks like that you're using a post function to get data, which would be counter-intuitive. But without the code of GenericPostService it's hard to tell. Please add the code. — neox5, Mar 17 '20 at 12:14

score 0 · Answer 1 · answered Mar 17 '20 at 12:02

0

What does your genericPostService.post method return? I'm guessing it's an rxjs Observable<T>.

In that case you need to subscribe to it. Something like this;


ngOnInit() {
   this.faqservice.getFaqContent()
            .subscribe(res => this.faqSectionList = res, err => this.onLoadError(err));
 }

As far as I know you cannot await an Observable without converting it to a Promise. See this post.

answered Mar 17 '20 at 12:02

DaggeJ

2,094
1
10
22

It returns the data from the jpath of my java bean – Rohan Sarkar Mar 17 '20 at 12:30
@Path("/getFAQContent") @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON) public Map getFAQContent() throws ServiceFatalException,ServiceExpectedException{ long startTime = Stat.startTime(this,"getFAQContent"); try { Map modelMap = new HashMap(); CustomizedRequest request = new CustomizedRequest(requestOriginal,false); MyContext myContext = getMyContext(request); MySEContextService context = myContext.getContext(); GetFAQContentDataInBean getFAQContentDataInBean = new – Rohan Sarkar Mar 17 '20 at 12:31
actually i have an faq page i want to take the data from the java bean and display on the page using angular – Rohan Sarkar Mar 17 '20 at 12:35
What is the return type of your service method? If it is a Promise you can use the async / await pattern, but if it is an Observable you need to explicitly subscribe to it as in my example above. If you are unsure, try `subscribe` and see how it goes :) – DaggeJ Mar 17 '20 at 12:44

Fetch data in angular

1 Answers1