cancel
Showing results for 
Search instead for 
Did you mean: 

Not able to upload csv sheet and get data in json format and displayed in table.

Former Member
0 Kudos

Hi,

I wanted to display a data in table from the excel sheet (csv format) .

VIEW

<Link text="Mass upload" press="onConfirmDialog"/>


<t:Table rows="{/ProductCollection1}" title="" selectionMode="MultiToggle"

  visibleRowCount="5">

  <t:columns>

  <t:Column width="13rem">

  <Label text="Reciver order" />

  <t:template>

  <Text text="{Reciver order}" />

  </t:template>

  </t:Column>

  <t:Column width="11rem">

  <Label text="Statistical key figure" />

  <t:template>

  <Text text="{Statistical key figure}" />

  </t:template>

  </t:Column>

  <t:Column width="11rem" >

  <Label text="Category" />

  <t:template>

  <Link text="{Category}" />

  </t:template>

  </t:Column>

  <t:Column width="11rem">

  <Label text="quantity" />

  <t:template>

  <Text text="{quantity}" />

  </t:template>

  </t:Column>

  <t:Column width="11rem" >

  <Label text="UoM" />

  <t:template>

  <Text text="{UoM}" />

  </t:template>

  </t:Column>

  <t:Column width="11rem">

  <Label text="description" />

  <t:template>

  <Text text="{description}" />

  </t:template>

  </t:Column>

  </t:columns>

</t:Table>

CONTROLLER

onInit: function() {

  var oModel = new sap.ui.model.json.JSONModel();

  

  },

  csvJSON :  function(csv){

 

  var lines=csv.split("\n");

 

  var result = [];

 

  var headers=lines[0].split(",");

 

  for(var i=1;i<lines.length;i++){

 

  var obj = {};

  var currentline=lines[i].split(",");

 

  for(var j=0;j<headers.length;j++){

  obj[headers[j]] = currentline[j];

  }

 

  result.push(obj);

 

  }

 

  //return result; //JavaScript object

  return JSON.stringify(result); //JSON

  },

 

  onConfirmDialog: function () {

  var dialog = new sap.m.Dialog({

  title: 'Upload',

  type: 'Message',

  icon: 'sap-icon://download',

  content: [

 

  new sap.ui.unified.FileUploader({

  id: 'fileuploader',

  width: '100%',

  uploadUrl: 'upload/'

 

  })

  ],

 

  endButton: new sap.m.Button({

  text: 'cancel',

  press: function () {

  dialog.close();

  }

  }),

  beginButton: new sap.m.Button({

  text: 'Upload',

  press: function (file){

 

  if( file.type.match(/text\/csv/) || file.type.match(/vnd\.ms-excel/) ){

  //if(file.type.match(/text\/csv/)){

  oFReader = new FileReader();

  oFReader.onloadend = function() {

  //console.log(csvJSON(this.result));

  var json = csvJSON(this.result);

 

  console.log(json);

  oModel.setData(json);

 

  };

  oFReader.readAsText(file);

  }

  else

  {

  console.log("This file does not seem to be a CSV.");

  }

  dialog.close();

  }

  }),

Error

Uncaught TypeError: Cannot read property 'match' of undefined .

  when i click on mass upload dialogue box will open and from there i wanted to upload csv file and data to be displayed in table.

Regards,

Ayushi

Accepted Solutions (1)

Accepted Solutions (1)

saivellanki
Active Contributor
0 Kudos

Hi Ayushi,


I tweaked your code. Now it works, check this sample: Plunker

Copy below data and paste it in CSV (I am not able to upload CSV here. Since, CSV attachment upload is not allowed on SCN). Make sure that you give same names for Excel Header and value that is bound to table. Snippet Image: Imgur


ReciverorderStatisticalkeyfigureCategoryquantityUoMdescription
22147123233Power Projector2147gPower Projector 4713
22134212121Monitor  Cable40gMonitor Locking Cable
32412452345Case489gLaptop Case
23345167234Gladiator1221gGladiator MX

Regards,

Sai Vellanki.

Former Member
0 Kudos

Hi Sai ,

Thanks Sai your code is working .

Regards,

Ayushi

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi,

SAPUI5 table needs JSON format, so while reading file u need to convert to JSON format.

Ref:Convert CSV to JSON in JavaScript | TechSlides for converting csv to JSON


JSBIN code for upload JS Bin - Collaborative JavaScript Debugging

data-dan
Explorer
0 Kudos
For 1-time conversions of CSV to JSON, use https://www.convertcsv.com/csv-to-json.htm