[SalesForce] displaying data from dumthe JSON file in LWC

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.

const testClient = (() => {
    return {
    ...
    }
});

export default testClient;

Now you can use this in your lwc component.

import { LightningElement, track, api  } from 'lwc';
import testFileJSON from './testFileJSON.js';

export default class ccClass extends LightningElement {

    @track terFileData = testFileJSON();

}

Now in your HTML you can refer that data like below.

<template>
    {terFileData.title}
</template>

You can use a template iterator to iterate the data from that object like below.

<template for:each={terFileData.sections} for:item="sectionItem" for:index="index">
    {sectionItem.sectionNum}
</template>
Related Topic