I need to display the data in the LWC from the dummy file i have created , but not sure how to fetch the values from the JSON file and display by JS and HTML file , kindly some one help me out for this.
Below is my Component Code:
Dummy JSON file:
const testClient = (() => {
return {
title: 'testClient',
sections: [
{
sectionNum: 1,
columnWidths: [],
header: {
columns: [
{
colNum: 1,
label: 'CDY',
class: ''
},
{
colNum: 2,
label: 'LDY',
class: ''
},
{
colNum: 3,
label: 'Abbcgd',
class:''
},
{
colNum: 4,
label: 'Mgyh',
class: ''
},
{
colNum: 5,
label: 'Cty',
class: ''
},
{
colNum: 6,
label: 'S-Cty',
class: ''
},
{
colNum: 7,
label: 'Sty',
class: ''
}
],
class: ''
},
body: {
rows: [
{
rowNum: 1,
columns: [
{
colNum: 1,
label: 'Toad',
class: ''
},
{
colNum: 2,
label: 'Boat',
class: ''
},
{
colNum: 3,
label: 'hgydu',
class: ''
},
{
colNum: 4,
label: 'Nhugn',
class: ''
},
{
colNum: 5,
labe:'AcOpen' ,
class: ''
},
{
colNum: 6,
labe:'Ryh' ,
class: ''
},
{
colNum: 7,
labe:'Rtdgdd' ,
class: ''
}
],
class: ''
}
]
}
}
]
}
});
JS File :
import { LightningElement, track, api } from 'lwc';
import testFileJSON from './testFileJSON.js';
export default class ccClass extends LightningElement {
@track terFileData;
}
HTML File:
<template>
</template>
Thanks if anyone can help me out for this…
Best Answer
You need to export the function from the
testFileJSON
file. Just add the export statement at the end of this file.Now you can use this in your lwc component.
Now in your HTML you can refer that data like below.
You can use a template iterator to iterate the data from that object like below.