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
Jhon smit 10Jhon smit 10 

How to display JSON data into html.

Hi,
I have a JSON sample data like given below:-
{
"data":[
       {"name":"abc","age":"29","city":"abc"},
       {"name":"abc","age":"29","city":"abc"},
       {"name":"abc","age":"29","city":"abc"},
       {"name":"abc","age":"29","city":"abc"}
      ]

}
I want to display it as html table.
CharuDuttCharuDutt
Hii Jhon Smit
Try The Below Code 
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset">
                  <th class="" scope="col">
                    <div class="slds-truncate" title="Account Name">Name</div>
                  </th>
                  <th class="" scope="col">
                    <div class="slds-truncate" title="Parent Account">Age</div>
                  </th>
                  <th class="" scope="col">
                    <div class="slds-truncate" title="Type">City</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <template for:each={records} for:item ='record'>
                <tr class="" key = {record.Id}>
                        <td data-label="Account Name">
                            <div class="slds-cell-wrap"><a href="javascript:void(0);">{record.Name}</a></div>
                        </td>
                        <td data-label="Parent Account">
                            <div class="slds-cell-wrap"><a href="javascript:void(0);">{record.Age</a></div>
                        </td>
                        <td data-label="Industry">
                            <div class="slds-cell-wrap">{record.City</div>
                        </td>
                </tr>
                </template>
            </tbody>
        </table>

JS
    @api records;
    @api errors;

    @wire(getAllAccounts,{
        
    )
    wiredCases({
        data,error
    }){
    if(data){
        this.records = data;
        this.errors = undefined;
    }
    if(error){
        this.errors = error;
        this.records = undefined;
        }
    }
Please Mark It As Best Answer if it Helps
Thank You!
 
Suraj Tripathi 47Suraj Tripathi 47
Hi Jhon smit,

Try the below code. 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table id="myTable">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>city</th>
        </tr>
    </table>
</body>

<script>
    var jsonData = {
        "data": [
            { "name": "abc", "age": "29", "city": "abc" },
            { "name": "abc", "age": "29", "city": "abc" },
            { "name": "abc", "age": "29", "city": "abc" },
            { "name": "abc", "age": "29", "city": "abc" }
        ]
    }
    jsonData.data.forEach(createData);
    function createData(item,index){
        var table = document.getElementById("myTable");
        var row = table.insertRow();
        var cell1 = row.insertCell();
        var cell2 = row.insertCell();
        var cell3 = row.insertCell();
        cell1.innerHTML = item.name;
        cell2.innerHTML = item.age;
        cell3.innerHTML = item.city;
    }
</script>

</html>
Please mark it as best answer if it helps you to fix the issue.
Thank you!
Regards,
Suraj Tripathi