在闪电组件中显示 csv 数据

Question

I have been trying to show CSV data in the lightning component but it is not showing as expected I need to show it in a table format. Table format

The component is displaying data but not in table format as it is in CSV file.

Component

<aura:attribute name="showcard" type="boolean" default="false"/>
<aura:attribute name="tabledata" type="object[]" />
<aura:attribute name="header" type="object[]" />
<div>
    <lightning:input aura:id="file" 
                     onchange="{!c.showcsvdata}" 
                     type="file" 
                     name="file" 
                     accept=".csv"
                     multiple="false"/>

</div>
<aura:if isTrue = "{!v.showcard}">
    <lightning:button label="Create Accounts" title="Neutral action" 
   onclick="{! c.Insertrecord }"/>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <aura:iteration items="{!v.header}" var="head" >

                    <th class="" scope="col">
                        <div class="slds-truncate" title="{!head}">{!head} 
                        </div>
                    </th>

                </aura:iteration>
            </tr>
        </thead>
                <tr class="slds-hint-parent">
                    <aura:iteration items="{!v.tabledata}" var="tab">
                    <td >
                        <div class="slds-truncate" title="{!tab}">{!tab}</div>

                    </td>
                  </aura:iteration>
                </tr>

    </table>

</aura:if>

controller

 showcsvdata :  function (component, event, helper){
    var fileInput = component.find("file").get("v.files");
    var file = fileInput[0];
    console.log(file);
    if (file) {
        component.set("v.showcard", true);
        var tabledata=[];
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            var csv = evt.target.result;
            var rows = csv.split("\n");
            console.log(rows[0]);
            var trimrow=rows[0].split(",");
            // alert(trimrow.length);
            component.set("v.header",trimrow);
            console.log(JSON.stringify(component.get("v.header")))
            for (var i = 1; i < rows.length; i++) {
                var cells = rows[i].split(",");
                if(cells.length!=1){
                    for(var j=0; j < cells.length; j++){

                           // var cel=cells.split("\n");
                            tabledata.push(cells[j]);
                            component.set("v.tabledata",tabledata);


                    }
                }
            }


  console.log('@@@@dynamic'+JSON.stringify(component.get("v.tabledata")));

        }
    }

this is show data like

It is showing data like this table data in single row. I need to show it as a table

Answer 1

Make the following changes to your code, it should work then.

Component

<aura:iteration items="{!v.tabledata}" var="row">
    <tr class="slds-hint-parent">
        <aura:iteration items="{!row}" var="tab">
            <td >
                <div class="slds-truncate" title="{!tab}">{!tab}</div>
            </td>
        </aura:iteration>
    </tr>
</aura:iteration>

Controller

for (var i = 1; i < rows.length; i++) {
    var cells = rows[i].split(",");
    var rowData=[];
    if(cells.length!=1){
        for(var j=0; j < cells.length; j++){
            rowData.push(cells[j]);
        }
        tabledata.push(rowData);
    }
}
component.set("v.tabledata",tabledata);