So rendern Sie Daten über DOM statt über eine Tabelle

Question

Ich habe eine Frage zu einer Anwendung, die ich erstelle. Ich verwende eine Oracle-Datenbank und erhalte Informationen aus der Datenbank und präsentiere sie auf dem Bildschirm in Form einer Tabelle. Ich möchte jedoch versuchen, die Daten einzeln zu verarbeiten. Erstellen Sie beispielsweise einen Absatz und zeigen Sie ihm einen Wert an. Ich kann die Daten nur durch Tabellen darstellen, gibt es eine andere Möglichkeit? Wenn mir jemand helfen kann, vielen Dank. Ich akzeptiere alle Tipps zur Verbesserung des Codes. Meine Index.html-Seite &

P粉706038741 · Answer

假设：

由于无法准确重现该场景，我将重点关注客户端，只理所当然地认为您的后端端点将正确返回一个数组，例如：data[iRow][iColumn]

这样的假设来自这样的行 cell1.innerHTML = data[i][0];

静态定义的数据示例：

我不太确定数据是否只是数组的数组，或者是否有某种方法可以通过列名称来寻址列值。无论如何，在这里我们将坚持使用普通数组范例，因为它似乎按照您自己的话工作。

这里我们定义了一个 data 数组，包含 2 行，每行 10 列：

//the array you are supposed to receive from your ajax call
const data = [
  //first row of cells
  [
    'rowX_cell(01)',
    'rowX_cell(02)',
    'rowX_cell(03)',
    'rowX_cell(04)',
    'rowX_cell(05)',
    'rowX_cell(06)',
    'rowX_cell(07)',
    'rowX_cell(08)',
    'rowX_cell(09)',
    'rowX_cell(10)',
  ],
  //second row of cells
  [
    'rowY_cell(01)',
    'rowY_cell(02)',
    'rowY_cell(03)',
    'rowY_cell(04)',
    'rowY_cell(05)',
    'rowY_cell(06)',
    'rowY_cell(07)',
    'rowY_cell(08)',
    'rowY_cell(09)',
    'rowY_cell(10)',
  ],
]

定义列名称和顺序：

我还可以说自从显示 SQL 查询以来从数据库获取的列的顺序，这就是有序列表：

DATREA、HORREA、CODORI、NUMORP、CODPRO、CODDER、QTDRE1、QTDRFG、CODLOT、OPERADOR

我们在 js 中将其定义为一个字符串数组，如下所示：

//ordered list of columns in the same order as the cols in data are supposed to be
const columnNames = ['DATREA','HORREA','CODORI','NUMORP','CODPRO','CODDER','QTDRE1','QTDRFG','CODLOT','OPERADOR'];

将行数组转换为对象：

将行 data 转换为一个对象数组，该数组具有以前面显示的列列表命名的行列作为属性：

function getRowObject(row){
  const rowObject = {};
  //for each col in columnNames
  columnNames.forEach((col, i)=>{
    //set the prop of rowObject named as col = the value at the i position in row
    rowObject[col] = row[i]; 
  });  
  return rowObject;
}

对于第一行数据（data[0]）将返回如下对象：

{
  "DATREA": "rowX_cell(01)",
  "HORREA": "rowX_cell(02)",
  "CODORI": "rowX_cell(03)",
  "NUMORP": "rowX_cell(04)",
  "CODPRO": "rowX_cell(05)",
  "CODDER": "rowX_cell(06)",
  "QTDRE1": "rowX_cell(07)",
  "QTDRFG": "rowX_cell(08)",
  "CODLOT": "rowX_cell(09)",
  "OPERADOR": "rowX_cell(10)"
}

如何在文档中显示该数据？

根据具体目标，您有无限种方法。实际上，您一开始并不需要将数组转换为对象，但它使得通过名称而不是使用索引号来访问其列变得更容易。

无论如何，例如，如果您需要将每一行显示为单个段落的内容，并将其所有列数据的串联作为内容：

function appendRowsAsParagraphsInTarget(target, rowObjects){
  //you can loop through all the rows and print them on screen
  rowObjects.forEach( row => {
    //here we are converting the row object back to a list of values
    values = columnNames.map( columnName => row[columnName] );
    //here to a single string where values are separated by ', ' and wrapped in []
    values = values.map( value => `[${value}]`);
    values = values.join(', ');  
  
    //append the newly created p in target
    const p = document.createElement('p');
    p.textContent = values;
    target.append(p);
  });
}

演示：

这是到目前为止所说内容的现场演示：

//the array you are supposed to receive from your ajax call
const data = [
  //first row of cells
  [
    'rowX_cell(01)',
    'rowX_cell(02)',
    'rowX_cell(03)',
    'rowX_cell(04)',
    'rowX_cell(05)',
    'rowX_cell(06)',
    'rowX_cell(07)',
    'rowX_cell(08)',
    'rowX_cell(09)',
    'rowX_cell(10)',
  ],
  //second row of cells
  [
    'rowY_cell(01)',
    'rowY_cell(02)',
    'rowY_cell(03)',
    'rowY_cell(04)',
    'rowY_cell(05)',
    'rowY_cell(06)',
    'rowY_cell(07)',
    'rowY_cell(08)',
    'rowY_cell(09)',
    'rowY_cell(10)',
  ],
]

//ordered list of columns in the same order as the cols in data are supposed to be
const columnNames = ['DATREA','HORREA','CODORI','NUMORP','CODPRO','CODDER','QTDRE1','QTDRFG','CODLOT','OPERADOR'];

//transforming the original array of rows as array of objects where each one as col data as properties
const rowObjects = data.map( row => getRowObject(row) );

console.log(rowObjects);

//appending the rowObjects as p paragraph to #output_rows
const target = document.getElementById('output_rows');
appendRowsAsParagraphsInTarget(target, rowObjects);

function appendRowsAsParagraphsInTarget(target, rowObjects){
  //you can loop through all the rows and print them on screen
  rowObjects.forEach( row => {
    //here we are converting the row object back to a list of values
    values = columnNames.map( columnName => row[columnName] );
    //here to a single string where values are separated by ', ' and wrapped in []
    values = values.map( value => `[${value}]`);
    values = values.join(', ');  
  
    //append the newly created p in target
    const p = document.createElement('p');
    p.textContent = values;
    target.append(p);
  });
}

function getRowObject(row){
  const rowObject = {};
  //for each col in columnNames
  columnNames.forEach((col, i)=>{
    //set the prop of rowObject named as col = the value at the i position in row
    rowObject[col] = row[i]; 
  });  
  return rowObject;
}

.label{
  font-weight: bold;
}

#output_rows{
}

#output_rows > p{
  border: solid 1px lightgray;
  margin-bottom: 1em;
}

Showing all the table rows as p elements