Guys I have the following json server.js:

const express = require("express")
const app = express()                         
const http = require('http').Server(app);     
const sqlite3 = require('sqlite3').verbose(); 
const db = new sqlite3.Database('./conta.sql') 
const handlebars = require("express-handlebars");
const bodyParser = require("body-parser")                                                   

app.use(express.static(__dirname   "/css/"));   
                                        
app.use(bodyParser.urlencoded({extended:true}));
                                        
app.engine('handlebars', handlebars({defaultLayout:false}));                                
app.set('view engine', 'handlebars');         

function getallusers(req,res) {          
 try{     
  data = [
   { 
    id: 1,
    nome: 'Ronnica Hardison',
    data: '2021-09-31 04-54-00',
    email: '[email protected]',
    nome_bonus: 'John Watson',
    cod_bonus: 'piwi20k9'
   },
   {
    id: 2,
    nome: 'Kellie Jean Abernethy',
    data: '2021-09-31 23-50-00',
    email: '[email protected]',
    nome_bonus: 'Ámelia Barton',
    cod_bonus: 'piwiki20k9'
   }
  ]
  res.render(__dirname   "/index.handlebars")
 }
 catch(err){
  console.log("\x1b[31m Problema ao carregar as informações do banco de dados!",err);
 }
}
app.get('/', function(req,res){                
 getallusers(req,res)                         
});                                                                                         

http.listen(8083,() => {                       
 console.log("Servidor escutando na porta 8083");                                           
});

index.handlebars:

<center>
 <div class="table">                    
  <table cellspacing="0">                        
   <thead>
    <tr class="indices">
     <th>Nome</th>
     <th>Email</th>                                
     <th>Data de Criação</th>
     <th>Convidada de</th>                         
     <th>Codico usado</th>
     <th>Status</th>                              
    </tr>                                        
   </thead>
   <tbody>                                        
    <tr>                                                                      
     {{data here}}
    </tr>
   </tbody>
  </table>
 </div>
</center>

So guys... what I needed to do was render the json data in the table, how can I do this? What I need is to create <th> tags according to the json information, but this has to be dynamic. The json information can be different, ie it's dynamic, so how can I render this?

CodePudding user response：

Try this:

in your server.js pass data to index.handlebars file:

res.render(__dirname   "/index.handlebars",{data})

and in index.handlebars use this

<center>
 <div class="table">                    
  <table cellspacing="0">                        
   <thead>
    <tr class="indices">
     <th>Nome</th>
     <th>Email</th>                                
     <th>Data de Criação</th>
     <th>Convidada de</th>                         
     <th>Codico usado</th>
     <th>Status</th>                              
    </tr>                                        
   </thead>
   <tbody>                                        
    {{#each data}}
    <tr>
      <th scope="row">{{this.id}}</th>
      <td>{{this.nome}}</td>
      <td>{{this.email}}</td>
      <td>{{this.nome_bonus}}</td>
      <td>{{this.cod_bonus}}</td>
    </tr>
    {{/each}}
   </tbody>
  </table>
 </div>
</center>