displaying data from dummy JSON file in LWC

Question

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...

Answer 1

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>

Answer 2

Your testFileJSON.js needs to export the value:

export default testClient;

Which you can then use in your main component JS:

@track terFileData = testClient();

And from there, you can display it however you'd like. You haven't included an example to go from, so I won't write that out for you, but it should be pretty easy to get started from this point.