0

I am trying to display JSON parsed data as table in LWC.

JSON response:

 [{"BranchType":"Sub Post Office","Circle":"Andhra Pradesh","Country":"India","DeliveryStatus":"Delivery","District":"Hyderabad","Division":"Hyderabad City","Name":"Humayunnagar","PINCode":"500028","Region":"Hyderabad City","State":"Telangana"},{"BranchType":"Sub Post Office","Circle":"Andhra Pradesh","Country":"India","DeliveryStatus":"Non-Delivery","District":"Hyderabad","Division":"Hyderabad City","Name":"Murad Nagar (Hyderabad)","PINCode":"500028","Region":"Hyderabad City","State":"Telangana"},{"BranchType":"Sub Post Office","Circle":"Andhra Pradesh","Country":"India","DeliveryStatus":"Non-Delivery","District":"Hyderabad","Division":"Hyderabad City","Name":"Shantinagar (Hyderabad)","PINCode":"500028","Region":"Hyderabad City","State":"Telangana"}]

I have tried below.

JS:

buttonClick(){
       // alert('Response ');
        postOfficeByPincode({pincode: this.pincode}).then((response) => {
            let parsedData = JSON.stringify(response);
            this.parsedData = parseData;
        })
        
    }

IN LWC Template:

<template>
   <lightning-card title="Postal APIs">
        <div class="slds-var-m-around_medium">
            <lightning-input onchange={handleonchange} label="Pin Code">

            </lightning-input>
            <br/>
            <lightning-button label="Get Postal Address" onclick={buttonClick}>
            </lightning-button>
            <br/>
           
        </div>
    </lightning-card>

    <lightning-card title="Result">
        <template for:each={parsedData} for:item="res">
            <div key={res.Name}>
                  <lightning-formatted-rich-text value={res.Name}></lightning-formatted-rich-text>
              
            </div>
          </template>
    </lightning-card>
    
</template>

I am unable to display. please help.

1

2 Answers 2

0

Try like below, it should work.

JSON.parse

buttonClick(){
       // alert('Response ');
        postOfficeByPincode({pincode: this.pincode}).then((response) => {
            let parsedData = JSON.parse(response);
 console.log('parsedData :::',parsedData );
            this.parsedData = parseData;
        })
        
    }
2
  • it's not working
    – Md Sohail
    Dec 31, 2023 at 9:16
  • @MdSohail can you attach screenshot of your console. what it's printing
    – Gopal
    Dec 31, 2023 at 9:26
0

You can utilise OOB lightning-datatable to show the contents of the json as table on UI.

.html

<lightning-datatable data={data} columns={cols} key-field="Name"></lightning-datatable>

.js

data = [
{
  "BranchType": "Sub Post Office",
  "Circle": "Andhra Pradesh",
  "Country": "India",
  "DeliveryStatus": "Delivery",
  "District": "Hyderabad",
  "Division": "Hyderabad City",
  "Name": "Humayunnagar",
  "PINCode": "500028",
  "Region": "Hyderabad City",
  "State": "Telangana"
},
{
  "BranchType": "Sub Post Office",
  "Circle": "Andhra Pradesh",
  "Country": "India",
  "DeliveryStatus": "Non-Delivery",
  "District": "Hyderabad",
  "Division": "Hyderabad City", "Name": "Murad Nagar (Hyderabad)", "PINCode": "500028", "Region": "Hyderabad City", "State": "Telangana"
}, {
  "BranchType": "Sub Post Office", 
  "Circle": "Andhra Pradesh",
  "Country": "India",
  "DeliveryStatus": "Non-Delivery",
  "District": "Hyderabad",
  "Division": "Hyderabad City",
  "Name": "Shantinagar (Hyderabad)",
  "PINCode": "500028",
  "Region": "Hyderabad City",
  "State": "Telangana"
}
];
cols = [{ label: 'Name', fieldName: 'Name' }, { label: 'Branch Type', fieldName: 'BranchType' }, { label: 'Circle', fieldName: 'Circle' }, { label: 'Country', fieldName: 'Country' }];

You can add any additional columns based on your requirement. Go thru documentation of data table to know more formats and types you can add.

see working demo here.

2
  • I am able to display the data. I have parsed in apex and called in JS. Thank you all for your assistance
    – Md Sohail
    Dec 31, 2023 at 10:11
  • 1
    @MdSohail if this answered your question, please mark as best answer.
    – Phil W
    Dec 31, 2023 at 14:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .