1

While working with an api, I get the response in the APEX debugs, but was unable to display data in LWC.

APEX:

public with sharing class myReportController {

public static String Response { get; set;}
public static String Headers { get; set; }

@AuraEnabled(Cacheable=true)
public static void myReportFetchMethod() {
    getAndParse('GET');
}    
@AuraEnabled(Cacheable=true)
public static void getAndParse(String GET) {
    String serviceEndpoint= 'https://mywebsite/endpoint';
    // Get the XML document from the external server
    Http http = new Http();
    HttpRequest request = new HttpRequest();

    request.setEndpoint(serviceEndpoint);

    request.setMethod('GET');
    request.setHeader('Accept','application/json');

    request.setTimeout(120000); 
    HttpResponse res = http.send(request);

    System.debug(res.getBody());
    response=res.getBody();
}    
}

JS Controller:

import { LightningElement, api, wire, track } from 'lwc';
import myReportFetchMethod from '@salesforce/apex/myReportController.myReportFetchMethod';

export default class myReportController extends LightningElement {
@track accounts;
@track error;

@wire(myReportFetchMethod)
wiredAccounts({ error, data }) {
    if (data) {
        this.accounts = data;
        this.error = undefined;
        console.log('TEST: '+this.accounts);
    } else if (error) {
        this.error = error;
        this.accounts = undefined;            
    }
}


}

HTML:

<template>
<lightning-card  title="My Report">
    <lightning:accordion aura:id="accordion" >

        <template if:true={accounts}>
            <template for:each={accounts} for:item="account">
                Attribute 1 - {account.A}
                Attribute 1 - {account.B}
                Attribute 1 - {account.C}
                Attribute 1 - {account.D}             
            </template>
        </template>

    </lightning:accordion>
   </lightning-card>
   </template>

JSON:

[
{
"A": "Block A",
"B": 164359,
"C": 515,
"D": 3173,
},
{
"A": "Block B",
"B": 101739,
"C": 0,
"D": 11591,
 }
] 

Any suggestion would be appreciated. Thanks! I hope everyone is doing great during this lockdown. Hope everything will be alright soon!

2

I suggest you generate an apex Message class for the response based on your JSON. For the JSON you have posted an apex class can be generated as shown below

public class ResponseWrapper{
  public String A;  //Block A
  public Integer B; //164359
  public Integer C; //515
  public Integer D; //3173
}

Then you can send this response to your front end in more defined way by changing below code

@AuraEnabled(Cacheable=true)
public static List<ResponseWrapper> myReportFetchMethod() {
    getAndParse('GET');
}    
  public static List<ResponseWrapper> getAndParse(String GET) {
  String serviceEndpoint= 'https://mywebsite/endpoint';
 // Get the XML document from the external server
  Http http = new Http();
  HttpRequest request = new HttpRequest();

  request.setEndpoint(serviceEndpoint);

  request.setMethod('GET');
  request.setHeader('Accept','application/json');

  request.setTimeout(120000); 
  HttpResponse res = http.send(request);

  System.debug(res.getBody());
  response=res.getBody();
  return (List<ResponseWrapper>) System.JSON.deserialize(res.getBody(), List<ResponseWrapper>.class)
}  

Notice that your auraEnabled methods are no more void methods and instead they return a list.

Then once you have data you can use the wire methods as you have to show the data on your front end component.

2
  • Hi @mohith I tried your way and it works. Thanks for the answer. I have a question. Is it always required to write a wrapper? Can't I pass a collection (map, list) and iterate over it on HTML? Probably we want to keep the UI as simple as possible?
    – MnZ
    Apr 1 '20 at 6:05
  • 1
    You can also use Maps should be fine.I prefer a wrapper as it makes it easy to trace the output .If your json keys are dynamic then maps are preferred Apr 1 '20 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.