+ Start a Discussion
Poorna DeveloperPoorna Developer 

Display JSON in LWC

Hi,

I have Apex code  output JSON data,

User-added image

I wish to display this json data in my LWC. 
Html:
<template>
    <lightning-card title="Report Data" icon-name="lightning-icon" >
        <div class="slds-m-around_medium">
            <template if:true={lapp}>
                <ul>
               <template for:each={lapp} for:item="app">
                   <li key={app.Id}> {app.Name} </li>
               </template>
            </ul>
           </template>
           <template if:true={error}>
               {error}
           </template>  
        </div>
 </lightning-card>
</template>

Js:
import { LightningElement, wire, track} from 'lwc';
import getURL from '@salesforce/apex/CreateReport.reportgen';
export default class RedirecctedURL extends LightningElement {
       @track lapp;
       @track data;
       @track error;
       wiredActivities;
     @wire(getURL,{
     }
     )
     wiredCases(value){
     this.wiredActivities = value;
     const { data, error } = value;
     
     if(data){
       this.lapp = JSON.stringify(data);
       console.log(JSON.stringify(data));
     
     }else if(error){
       console.log(error);
       this.error = error;
     }
     }
}

Any help??
 
Best Answer chosen by Poorna Developer
CharuDuttCharuDutt
Hii Poorna,
Please See My Answer Above I've Made Some changes
yours=====>     this.lapp = JSON.stringify(data);
Changed======>  this.lapp = JSON.parse(JSON.stringify(data));
This Will Help In Showing Data Also Check if Console is Printing or not on Google Console

Please Mark it As Best Answer If it Helps
Thank You!

All Answers

CharuDuttCharuDutt
Hii  Poorna Developer
Copy Paste the Below Code
@track lapp;
    @track data;
    @track error;
    
    wiredActivities;
  @wire(getAccounts,{
  }
  )
  wiredCases(value){
  this.wiredActivities = value;
  const { data, error } = value;
  
  if(data){
    this.lapp = JSON.parse(JSON.stringify(data));
    console.log("JSON.stringify===> "+ JSON.stringify(data));
  
  }else if(error){
    this.error = error;
    console.log(error);
  }
  
  }

Please Mark it As Best Answer If it helps.
Thank You!
Poorna DeveloperPoorna Developer
Hi CharuDutt,

Actually I wish to display my json in the lighnting card.
But I get this kind of Output only.
 User-added image
Is there any possibility?
 
CharuDuttCharuDutt
Hii Poorna,
Please See My Answer Above I've Made Some changes
yours=====>     this.lapp = JSON.stringify(data);
Changed======>  this.lapp = JSON.parse(JSON.stringify(data));
This Will Help In Showing Data Also Check if Console is Printing or not on Google Console

Please Mark it As Best Answer If it Helps
Thank You!
This was selected as the best answer
rakesh kumar 668rakesh kumar 668
You don't actually need to serialize the wrapper in apex and then parse in the component explicitly, the framework does the job by itself!
ipl 2021 (http://www.ghdsports.fun/)
Naveen KNNaveen KN
Hi Poorna, 

Could you please try if this works this.lapp = data;
If it works we can avoid two extra operations in the current code this.lapp = JSON.parse(JSON.stringify(data));

please confirm. 
eliclak seleliclak sel
What is the best way to use the script for a dynamic store that hsoted on WordPress? I want to use for bright-star.com (https://bright-star.com.au/) store.
ar rehmanar rehman
Good you are done most of the part. charundutt made complete the code. this is my website  goi through it. pikashow (https://pikashow.org)