Как я могу перебирать массив в javascript и отображать его содержимое в определенной форме?

Question

Я играю с библиотекой http://pdfmake.org/#/, которая создает файлы PDF по запросу. Я могу настроить там все, что нужно напечатать, и поскольку я могу выбрать подходящий макет, я решил пойти со столом.

Таким образом, код таблицы выглядит следующим образом:

table: { 
    widths: ['*', '*', '*',200,'*', '*'], //setting up the dimension of each column 
    body: [ 
    [ 'No1.', 'No2', 'No3', 'No4', 'No5', 'No6'], //header of each column 
    [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row 
    [ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc. 
     ] 
    } 

У меня есть таблица, заполненная раньше с данными извлекалось AJAX:

client_data = JSON.parse(response); 

и когда я alert(client_data) я вижу [Object object],[Object object],[Object object], etc.. Каждый объект содержит необходимые данные, так что я мог бы сделать, например:

var no1 = client_data.no1[0] 

и т.д. А теперь я хочу, чтобы построить цикл внутри body: [ ], который будет замещать существующие фиктивные строки:

[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'], //first row 
[ 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef', 'abcdef'] //second row, etc. 

с данные от client_data. Я не знаю, как итерации от него и получить соответствующие данные, не могли бы вы мне помочь?

Answer 1

Я построил простой фрагмент с петлей для заполнения таблицы. Вставьте его прямо в pdfmake playground, чтобы увидеть его в действии.

С уважением!

var client_data, dataTable, i, item, len, rows; 
client_data = [ 
    { 
    prop01: 'row01.prop01', 
    prop02: 'row01.prop02', 
    prop03: 'row01.prop03', 
    prop04: 'row01.prop04', 
    prop05: 'row01.prop05', 
    prop06: 'row01.prop06' 
    }, { 
    prop01: 'row02.prop01', 
    prop02: 'row02.prop02', 
    prop03: 'row02.prop03', 
    prop04: 'row02.prop04', 
    prop05: 'row02.prop05', 
    prop06: 'row02.prop06' 
    }, { 
    prop01: 'row03.prop01', 
    prop02: 'row03.prop02', 
    prop03: 'row03.prop03', 
    prop04: 'row03.prop04', 
    prop05: 'row03.prop05', 
    prop06: 'row03.prop06' 
    } 
]; 

dataTable = { 
    style: 'table', 
    table: { 
    widths: ['30%', '10%', '15%', '15%', '15%', '15%'], 
    headerRows: 1, 
    body: [ 
     [ 
     { 
      text: 'No1', 
      style: 'tableHeader' 
     }, { 
      text: 'No2', 
      style: 'tableHeader' 
     }, { 
      text: 'No3', 
      style: 'tableHeader' 
     }, { 
      text: 'No4', 
      style: 'tableHeader' 
     }, { 
      text: 'No5', 
      style: 'tableHeader' 
     }, { 
      text: 'No6', 
      style: 'tableHeader' 
     } 
     ] 
    ] 
    }, 
    layout: { 
    hLineWidth: function(i, node) { 
     if (i === 0 || i === node.table.body.length) { 
     return 0; 
     } else if (i === node.table.headerRows) { 
     return 2; 
     } else { 
     return 1; 
     } 
    }, 
    vLineWidth: function(i) { 
     return 0; 
    }, 
    hLineColor: function(i) { 
     if (i === 1) { 
     return '#2361AE'; 
     } else { 
     return '#84a9d6'; 
     } 
    }, 
    paddingLeft: function(i) { 
     if (i === 0) { 
     return 0; 
     } else { 
     return 8; 
     } 
    }, 
    paddingRight: function(i, node) { 
     if (i === node.table.widths.length - 1) { 
     return 0; 
     } else { 
     return 8; 
     } 
    } 
    } 
}; 

rows = dataTable.table.body; 

i = 0; 

len = client_data.length; 

while (i < len) { 
    item = client_data[i]; 
    rows.push([ 
    item.prop01, { 
     text: item.prop02, 
     alignment: 'right' 
    }, { 
     text: item.prop03, 
     alignment: 'right' 
    }, { 
     text: item.prop04, 
     alignment: 'right' 
    }, { 
     text: item.prop05, 
     alignment: 'right' 
    }, { 
     text: item.prop06, 
     alignment: 'center' 
    } 
    ]); 
    i++; 
} 
var dd = { 
    content: [], 
    styles: { 
     table: { 
      margin: [0, 5, 0, 15] 
     }, 
     tableHeader: { 
      bold: true, 
      fontSize: 10, 
      color: '#2361AE' 
     } 
    }, 
    defaultStyle: { 
     // alignment: 'justify' 
    } 

} 

dd.content.push(dataTable)