0

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

0

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>
1
  • ....thankyou soo much it helped me to do ,,,how to put all header in one single parallel line....kindly help on this – Rohit Aug 27 '20 at 18:42
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.