function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Poorna DeveloperPoorna Developer 

Convert JSON to LWC

Hi all,

I have JSON data like,

{"data":{"id":"448234325073116067","customer_id":"25654656354619231","lead_email":"******2@gmail.com.com","connection_ids":["2911647243243459434"],"status":"initialized","created_at":"2021-03-29T06:41:06Z"}}


I wish to display the above JSON data in lightning record page like a  list view.

Instead of this ,
User-added image

Id - Customer_Id - lead_email - connection_ids - status
448234325073116067 -25654656354619231-******2@gmail.com.com-2911647243243459434-initialized

This there any idea?
Thanks everyone.
Malika Pathak 9Malika Pathak 9
Hii Poorna,
Here Below, this code for converting your JSON to LWC List
  
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GET LEAD JSON DATA AND SHOW INTO LIST USING LWC COMPONENTS </title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<template>
    <div class="container main">
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-1">
                <lightning-card variant="Narrow" title="Search weather by City " icon-name="standard:account">
                    <p class="slds-p-horizontal_small">
                        <template if:true={Lead}>
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>customer_id</th>
                                    <th>lead_email</th>
                                    <th>connection_ids</th>
                                    <th>status</th>
                                    <th>created_at</th>
                                </tr>
                                <tr>
                                    <template for:each={Lead.data} for:item="Leaddata">
                                        <tr key={LeadData.Id}>
                                            <td>{Leaddata.Id}</td>
                                            <td>{Leaddata.customer_id}</td>
                                            <td>{Leaddata.lead_email}</td>
                                            <td>
                                                <table>
                                                    <tr>
                                                    <template for:each={Leaddata.connection_ids} for:item="LeaddataCon">
                                                        <td>{LeaddataCon}</td>
                                                    </template>
                                                    </tr>    
                                                </table>
                                            </td>
                                            <td>{Leaddata.status}</td>
                                            <td>{Leaddata.created_at}</td>
                                        </tr>
                                    </template>
                               </tr>
                            </table>    
                        </template>
                    </p>
                </lightning-card>   
            </div>
        </div>
    </div>
</template>
</head>
</html>


Now You have to write a JS File for the Above code that would store the lead Json in variable Lead so the LWC component use that to show data  
 

If you find this helpful mark it as the best answer.

thanks, Regards
Malika Pathak