DataTable Array Helps

[arif25169]

Hi This Is my JSON value for the datatable

Code: Select all

this.state = {
        sales: [{
            "voucherId":"18010110004",
            "date":"2018-01-01",
            "refNo":"0",
            "narration":null,
            "inWordTk":"Three Thousand  Taka  Only",
            "detailsList":[  
               {  
                  "ledgerName":"Cash",
                  "drAmount":3000,
                  "crAmount":0
               },
               {  
                  "ledgerName":"New Admission Fee Collection",
                  "drAmount":0,
                  "crAmount":3000
               }
            ]
          }
        ]
    };

I want that json datakey "detailsListvalue" from the list (which is the beginning of another array) array but it doesn't work like an object. How can I solve it

[mert.sincan]

Could you please attach your DataTable component?

I tested this issue. it works fine for me.
Test code;

Code: Select all

constructor() {
        super();
        this.state = {
            sales: [{
                "voucherId":"18010110004",
                "date":"2018-01-01",
                "refNo":"0",
                "narration":null,
                "inWordTk":"Three Thousand  Taka  Only",
                "detailsList":[  
                   {  
                      "ledgerName":"Cash",
                      "drAmount":3000,
                      "crAmount":0
                   },
                   {  
                      "ledgerName":"New Admission Fee Collection",
                      "drAmount":0,
                      "crAmount":3000
                   }
                ]
              }
            ]
        };
    }
    
    render() {
        
        return (
            <div>
                    <h3>Basic</h3>
                    <DataTable value={this.state.sales[0].detailsList}>
                        <Column field="ledgerName" header="LedgerName" />
                        <Column field="drAmount" header="DrAmount" />
                        <Column field="crAmount" header="CrAmount" />
                    </DataTable>
            </div>
        );

[arif25169]

Hi aragorn,

It worked like a charm, this is what i was needed.

[arif25169]

Hey ,

Here you're using this

Code: Select all

this.state.sales[0].detailsList 

Which is index 1, how can i show value if i have multiple index and show them all at once.

Thanks

[arif25169]

Hi This is my json value

Code: Select all

this.state = {
            sales: [
                {
                  "customStudentId": "2064517",
                  "studentRoll": 26,
                  "studentName": "Md. Faiaz Jakir ",
                  "stdCtExamMarks": [
                    {
                      "viewSerial": 1,
                      "subjectName": "Bangla ",
                      "subjectFullMark": 25,
                      "obtainedMark": 0,
                      "highestMarks": 25
                    }
                  ]
                },
                {
                  "customStudentId": "2065817",
                  "studentRoll": 27,
                  "studentName": "Miraj  Bin Atik ",
                  "stdCtExamMarks": [
                    {
                      "viewSerial": 1,
                      "subjectName": "English ",
                      "subjectFullMark": 25,
                      "obtainedMark": 0,
                      "highestMarks": 25
                    }
                  ]
                }
              ]
        };

And this the code for datatable

Code: Select all

<DataTable value={this.state.sales[0].stdCtExamMarks}>
        <Column field="subjectName" header="Subject" />
        <Column field="subjectFullMark" header="Full Mark" />
        <Column field="obtainedMark" header="Obtainedn Mark" />
        <Column field="highestMarks" header="Highest Mark" />
    </DataTable>

And this the result photo



But i do need the second value too. How can I do that?

[mert.sincan]

You can use body attribute of Column. Please try;

Code: Select all

export class DataTableTest extends Component {

    constructor() {
        super();
        this.state = {
            sales: [
                {
                    "customStudentId": "2064517",
                    "studentRoll": 26,
                    "studentName": "Md. Faiaz Jakir ",
                    "stdCtExamMarks": [
                        {
                            "viewSerial": 1,
                            "subjectName": "Bangla ",
                            "subjectFullMark": 25,
                            "obtainedMark": 0,
                            "highestMarks": 25
                        }
                    ]
                },
                {
                    "customStudentId": "2065817",
                    "studentRoll": 27,
                    "studentName": "Miraj  Bin Atik ",
                    "stdCtExamMarks": [
                        {
                            "viewSerial": 1,
                            "subjectName": "English ",
                            "subjectFullMark": 25,
                            "obtainedMark": 0,
                            "highestMarks": 25
                        }
                    ]
                }
            ]
        };

        this.bodyTemplate = this.bodyTemplate.bind(this);
    }

    bodyTemplate(rowData, props) {
        var examMark = rowData.stdCtExamMarks[0];
        return examMark[props.field];
    }

    render() {
        return (
            <div>
                <DataTable value={this.state.sales}>
                    <Column field="subjectName" header="Subject" body={this.bodyTemplate} />
                    <Column field="subjectFullMark" header="Full Mark" body={this.bodyTemplate} />
                    <Column field="obtainedMark" header="Obtainedn Mark" body={this.bodyTemplate} />
                    <Column field="highestMarks" header="Highest Mark" body={this.bodyTemplate} />
                </DataTable>
            </div>
        );
    }
}