Converting text file into a table

Question

I have a text file with code that I am trying to display in a table format. The first column should be the type of fruit, the second should be the quantity eaten, the third should be the quantity bought, and the fourth is the date and time of purchase.

I tried parsing the data and logging it to the console. That seems to work to visualize the data better, but I honestly have no idea how to actually display the data in a table. I am really new to coding in Javascript, so I don't understand the language very well.

This is my first post on this site so I am not really sure if I posted this properly.

link toCode: https://pastebin.com/PxYASR2T

Welcome to StackOverflow. Please add your code into a code snippet and create a [mcve] of your attempt to solve the issue. (including the part that you log to console) - This will make the question self-sufficient (in case the external link ceases to work, which will make the question incomplete/unsolvable) — blurfus, Jul 24 '18 at 15:25

score 0 · Accepted Answer · answered Jul 24 '18 at 08:53

You can parse the data into a usable format as below, mounting it as a table can be done in many ways, for instance https://www.npmjs.com/package/tableify or Convert JSON array to an HTML table in jQuery

const parsedData = getData()
  .split('\n')
  .filter(x => !!x && !x.match(/x{2,}/))
  .map(fruitRow => {
    const thisSplit = fruitRow.split(/[-–-]/)
    return {
      fruit: thisSplit[3].replace(/\s+/g, ''),
      eaten: thisSplit[4].match(/\d+/)[0],
      bought: thisSplit[6].replace('\n', '')
    }
  })
  .filter(x => !!x)
  
console.dir(parsedData)

function getData() {
  return data = `
2018-07-23 07:33:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 1- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 07:43:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 2- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 08:03:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 2- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 08:53:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 3- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 09:03:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 3- No of fruit bought –1
2018-07-23 09:03:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 1- No of fruit bought –0
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 09:23:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 3- No of fruit bought –1
2018-07-23 09:23:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 1- No of fruit bought –0
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 09:33:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 09:33:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 2- No of fruit bought –0
2018-07-23 09:33:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 09:33:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 09:43:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 09:43:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 4- No of fruit bought –2
2018-07-23 09:43:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 09:43:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 09:53:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 09:53:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 5- No of fruit bought –1
2018-07-23 09:53:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 09:53:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 10:03:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 10:03:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 6- No of fruit bought –1
2018-07-23 10:03:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 10:03:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 10:13:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 10:13:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 9- No of fruit bought –2
2018-07-23 10:13:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 10:13:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 10:23:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 10:23:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 9- No of fruit bought –1
2018-07-23 10:23:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 10:23:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 10:33:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 4- No of fruit bought –0
2018-07-23 10:33:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 10- No of fruit bought –1
2018-07-23 10:33:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 10:33:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2018-07-23 10:43:38 INFO  TestJsonSyncUtil:237  - Apple – No of fruit eaten 10- No of fruit bought –3
2018-07-23 10:43:38 INFO  TestJsonSyncUtil:237  - Banana – No of fruit eaten 10- No of fruit bought –0
2018-07-23 10:43:38 INFO  TestJsonSyncUtil:237  - Strawberry – No of fruit eaten 0- No of fruit bought –1
2018-07-23 10:43:38 INFO  TestJsonSyncUtil:237  - Mango – No of fruit eaten 0- No of fruit bought –1
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
`;
}

score -1 · Answer 2 · answered Jul 24 '18 at 08:12

-1

You need to convert the text into JSON format, then you can use AJAX Call to render that JSON text into a table easily.

answered Jul 24 '18 at 08:12

Junaid Shahid

51
1
3

1

you don't need AJAX to render JSON into a HTML table – blurfus Jul 24 '18 at 15:23
Please explain more, I want to know your view. – Junaid Shahid Jul 31 '18 at 06:26
JSON is JavaScript Object Notation - a mechanism for storing and exchanging data. It has nothing to do with Asynchronous Javascript And XML calls - you can use plain JS to parse JSON into a table. No need to have Asyn or XML involved – blurfus Aug 02 '18 at 17:02

Converting text file into a table

2 Answers2