将数组转换为对象以创建报告javascript

时间:2016-08-07 20:20:06

标签: javascript html arrays

我有一个表示这样的表的数组:

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

我想让用户选择他们想要的列,所以稍后他们可以使用他们选择的列制作pdf报告,我认为制作这样的对象是获取该数据的最佳方式,我可能错了当然哈哈。

假设用户想要报告标题上的以下数据:姓名,年龄,日期,我想要一个像这样的对象:

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

所以我可以做下一份报告:

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

我有一个数组,其中包含用户想要存储索引的列,例如,如果用户想要第1列和第2列,则数组为:

var userColumns = [1,2]

我该如何处理这个问题?你会怎么做?

编辑:我把错误的表放了。这是表格:

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]]

为了获得一些上下文,我有一个包含多个列和行的CSV文件,每行都有不同的codeItem,这个codeItem可以在多行中重复,我做的是创建多个具有相同代码报告的表例如,如果CSV数据有10行,5个带有codeItem:1,另外5个带有codeItem:2,我创建了2个表,一个包含所有行的codeItem 1,另一个包含codeItem 2,然后我将为每个codeItem生成一个报告,在本例中为2个报告,因此每个表都有一些行,这些行在某些列上具有相同的数据。 用户列是用户选择在报表上显示的列,我有一个包含标题列的数组:

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

我所做的是将标题数组上的索引与userColumns匹配,假设用户想要名称和年龄标题,用户标题是:

userHeader = [0,2]

我知道这听起来令人困惑,而且确实如此。

3 个答案:

答案 0 :(得分:0)

您只需要将表头与像

这样的用户数据数组关联起来
ReportHeaderAssociation = {
"0":Name",
"1":Age",
....

}

因此,当您获得用户想要的列(此处为[1,2])时,您可以通过访问数组元素从关联对象和值中获取标题。

就像,userdata[1]会从性别数据中提供第二个元素。同样所有元素。

简而言之 :具有相对性的单个对象无需运行长循环即可将数组转换为对象。

答案 1 :(得分:0)

您需要列名称的映射,例如,使用与数据相同的索引以及所需列的过滤器。

之后,map和reduce是你的朋友;)

&#13;
&#13;
var table = [
  ['John', 'male', 24, '12/12/12'],
  ['Jane', 'female', 22, '11/11/11']
];

var columnMapping = ['name', 'gender', 'age', 'date'];

var getData = function(data, columnNames, columnFilter) {
  return data.map(function(item) {
    return item.reduce(function(obj, item, idx) {
      if (columnFilter.indexOf(idx) > -1) {
        obj[columnNames[idx]] = item;
      }
      return obj;
    }, {});
  });
}

// age and gender
console.log(getData(table, columnMapping, [1, 2]));

// name and date
console.log(getData(table, columnMapping, [0, 3]));

// name, age and date
console.log(getData(table, columnMapping, [0, 2, 3]));

// name, age and date only if name is John
console.log(getData(table, columnMapping, [0, 2, 3]).filter(function(item) {
  return item.name === 'John';
}));
&#13;
&#13;
&#13;

答案 2 :(得分:0)

首先,如果你想使用对象来存储来自给定数组的数据,你需要我例程来转换它们。因此,我始终创建一个空对象o = {},并使用o["prop"] = value可以填充此对象。与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}

借助ECMAScript 6类 Map ,可以将对象链接到任何数据。或者您可以使用IndexedDB

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

如果要遍历所有表(表1包含代码项1,表2包含代码项2,...),则需要一个可迭代的对象。我推荐一个数组。

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

我认为存储内存数据和生成不同报告的更好方法是使用这样的数据结构:

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

但是,在开放式浏览器中存储所有个人数据是个坏主意。对于显示一条记录的大量资源而言,问题是:希望这个人的数据是公开的吗?

一种解决方案是:前端&lt; - &gt;的node.js