Sebastian Chavez Irurzo Sebastian Chavez Irurzo - 2 months ago 5x
HTML Question

Convert an array into an object to create a report javascript

I have an array that represents a table like this:

table = [['john', 'male', 24, '12/12/12'], ['jane', 'female', 24, 12/12/12]]

I want to let the user choose which column they want, so later they can make a pdf report with the columns they chose, I think making an object like this is the best way to get that data, I might be wrong of course haha.

Let's say the user wants the following data on the report header: name, age, date, I want an object like this:

userHeader = { name: 'John', age: 24, date: '12/12/12'}

So I can make the next report:

Report #1234
|Name: John Date: 24/12/12 | <-Header
|Age: 24 |
|some data | <--Body
| .... |

I have an array with the columns the user wants that stores it index, for example if the user wants the columns 1 and 2, the array is this:

var userColumns = [1,2]

How can I approach this problem? How would you do it?

EDIT: I put the wrong table,. this are the tables:

table1 = [['john', 'male', 24, '12/12/12', 1], ['john', 'male', 24, 01/05/12, 1]]

table2 = [['john', 'male', 24, '12/07/12', 2], ['john', 'male', 24, 05/05/12, 2]]

To get some context, I have a CSV file with multiple columns and rows, each row has a different codeItem, this codeItem can be repeated in multiple rows or not, what i do is create multiple tables that have the same code report, for example if the CSV data has 10 rows, 5 with an codeItem:1 and the other 5 with codeItem: 2, I create 2 tables, one with all the rows that have the codeItem 1 and another with a codeItem 2, then I would make a report for each codeItem, in this case 2 reports, so each table has some rows that have the same data on some columns.
The user columns is what columns the user chose to appear on the report, I have an array with the header columns:

var headers = ['name', 'sex', 'age', 'date', 'codeReport']

What I do is match the index on the header array to the userColumns, lets say the user wants the name and age headers, the user header is:

userHeader = [0, 2]

I know it sounds confusing and it really is.


First of all, if you want to use objects for storing data from an given array, you need I routine to convert them. Therefor I allways create an empty object o = {}, and with o["prop"] = value can this object be filled. The same as o.prop = value.

let headers = ['name', 'sex', 'age', 'date', 'codeReport'];
function createObjectFromArray(array, indexes)
    let result = {};
    for(let index of indexes)
        result[headers[index]] = array[index];
    return result;
let recordObject = createObjectFromArray(['john', 'male', 24, '12/12/12', 1], [1, 2]);
//Object {sex: "male", age: 24}

With the help of the ECMAScript 6 class Map, it is possible to link an object to any data. Or you can use IndexedDB.

let reportDataBase = new Map();
reportDataBase.set(recordObject, "somedata");
reportDataBase.get(recordObject); // "somedata"

If you want to iterate through all tables (table 1 has code item 1, table 2 has code item 2, ...), you need an object, which is iterable. I recommend an array.

let tables = [table1, table2];
let selectedColumns = [1, 2];
for(var report = 0; report != tables.length; report++)
    console.log("report : " + (report + 1));
        console.log(createObjectFromArray(item, selectedColumns));

I think a better way to storage in-memory data and generate different reports, is to use a data structure like this:

var reports = [
    [['john', 24, "somedata1"], ['lara', 22, "somedata2"]],
    [['mark', 21, "somedata3"], ['eve', 25, "somedata4"]]

But its a bad idea, to storage all personal data in a open browser. To much ressources for showing one record and the question is: Wants the person that his data is public?

One solution is: frontend <-> node.js