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

[Former Member]

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

[saivellanki · Accepted solution]

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

Reciverorder	Statisticalkeyfigure	Category	quantity	UoM	description
22147123	233	Power Projector	2147	g	Power Projector 4713
22134212	121	Monitor  Cable	40	g	Monitor Locking Cable
32412452	345	Case	489	g	Laptop Case
23345167	234	Gladiator	1221	g	Gladiator MX

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai ,

Thanks Sai your code is working .

Regards,

Ayushi

[Former Member]

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]

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