如何将两个 sql 查询添加到一个 html table

Question

我正在尝试创建一个连接到 MSSQL 数据库并对其调用两个 sql 查询的应用程序。它与 nodeJS 后端一起工作。现在我尝试将这两个结果在 reactjs 中合并为一个 html table，但我仍然不能。

我有这个代码：

return (  
    <div className="App">
      <h1>Search in database</h1>

      <div className="form">
      <center>
      <label>Search Data from DB</label></center>
      <input type="text" name="material" />
      <button>Search</button>
      
      
      </div>
      <div class="div-table">
                <thead>
                       
             <div class="div-table-row">
             <div class="div-table-col"><th>Type</th></div>
             <div class="div-table-col"><th>Place</th></div>
             <div class="div-table-col"><th>Free space:</th></div>
             </div>
             
             </thead>
             <tbody>       
            {materialList.recordset.map(value=>{
              return (
                <tbody>
                <div class="div-table-col"><td>{value.MATNR}</td></div>
                <div class="div-table-col"><td>{value.NLPLA}</td></div>

                </tbody>
              )
            })}

                {emptySkate.recordset.map(val=>{
              return (
                  <tbody>
                  <div class="div-table-col"><td></td></div>
                  <div class="div-table-col"><td></td></div>
                  <div class="div-table-col"><td>{val.Line}</td></div>
                                                                
                  </tbody>
              )
                })}
                  
                </tbody>  

        </div>
      </div>
     
  )

结果是：

类型	地点	免费 space:
结果查询1	结果查询1
		结果查询2

我想要这样的结果：

类型	地点	免费 space:
结果查询1	结果查询1	结果查询2

我试了好几次tbody和table里面的table等等，但是还是没有得到我想要的结果，你不知道怎么编辑代码？

Answer 1

如果我对你的问题理解正确，你可以这样做：

function getRows(materialList, emptySkate) {

 // some assumptions
 // 1. materialList and emptySkate are linked with index. 
 // 2. materialList[0] and emptySkate[0] makes up the first row
 // 3. materialList is the base list, if this is empty, no rows will be returned
 // 4. if emptySkate is empty, the last column will be null or empty

 const result = materialList.map((ml, index) => {
    const es = emptySkate[index] || {};
    return {
       ...ml,
       ...es
    }
 });

 return result;

}

现在，在您的 tbody 中，您可以在 getRows 调用返回的数组上循环，而不是循环遍历两个不同的数组。

const rows = getRows(materialList.recordset, emptyStake.recordset);
  return (
    <tbody>       
      {rows.map(value=>{
        return (
           <tr>
             -- below markup is just to illustrate
             <div class="div-table-col"><td>{value.MATNR}</td></div>
             <div class="div-table-col"><td>{value.NLPLA}</td></div>
             <div class="div-table-col"><td>{val.Line}</td></div>
           </tr>
       )})}
    </tbody>
  )

如何将两个 sql 查询添加到一个 html table

How add two sql queries to one html table

html

html-table

reactjs