如何从单行表中获取数据并在javascript中显示为哈巴狗

问题描述

我想显示表中唯一一个特定行，其学生 ID 由用户提交到表单中。我尝试了各种方法，但没有奏效，请帮助我解决这个问题。怎么做在下面，我还提到了我想要的和我得到的我提到了我的整个代码请检查我的意见/databyid.jade >> 写了完整的问题帮助我吗？

我想要什么> 提交的 ID 为 1

我得到了什么> 提交的 ID 为 1

这是我的 应用程序

//data array
const students = [
  { ID: '1',name: 'Amit',age: '14',rollno: '11',class: '10' },{ ID: '2',name: 'Rahul',age: '12',rollno: '18',class: '8' },{ ID: '3',name: 'Aniket',age: '15',rollno: '16',{ ID: '4',name: 'ravi',age: '17',rollno: '15',class: '11' },];

//Get all students
app.get('/stdata',function(req,res) {
  res.render('dashboard',{ students: students});
});

//user input logic
app.post('/fetchstudent',res) {
  var userinput = Number(req.body.id);
  console.log(userinput);
  var isMatch = false;
  students.forEach(function(user) {
    if (user.ID === req.body.id) {
      console.log("success");
      res.render('databyid',{ students: students});
      isMatch = true;
    }
  });
  if (!isMatch) {
    // only logs once even though there are multiple users
    console.log("No Match!");
  } 
});

app.get('/',(req,res) => {
  res.json(JSON.stringify((students)));
});

app.listen(port,() => {
  console.log('Server is running on the port:');
});

这是我的 >>> 视图/databyid.jade

doctype html
html(lang='en')
  head
    style.
      table {
      font-family: arial,sans-serif;
      border-collapse: collapse;
      width: 100%;
      }
      td,th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
      }
      tr:nth-child(even) {
      background-color: #dddddd;
      }
    title Dashboard
  body
    h1(style='text-align:center;') API - 1       
    table.table.table-striped
      tbody
        tr
          th Student ID
          th Name
          th Age
          th Roll No
          th Class
        
      each n in students
        tr
          td= n.ID
          td= n.name
          td= n.age
          td= n.rollno
          td= n.class

这是我的 >> views/dashboard.jade

doctype html
html(lang='en')
  head
    style.
      table {
      font-family: arial,th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
      }
      tr:nth-child(even) {
      background-color: #dddddd;
      }   
    title Dashboard 
  body
    h1(style='text-align:center;') API - 1
    table.table.table-striped
      tr
        th Students ID
        th Name

      each n in students
        tr
          td= n.ID
          td= n.name
    h1(style='text-align:center;') API - 2
    |    
    form(name='form1',method='POST',action='/fetchstudent')
      table
        tr
          td Enter Student ID
          |         
          td
            input#stID(type='number',name='id',required='')
        |         
        tr
          td(colspan='2')
            input(type='submit',value='Save')

解决方法

// Try this //
    
    app.post('/fetchstudent',function(req,res) {
    var userinput = Number(req.body.id);
    console.log(userinput);
    var isMatch = false;
    
    students.forEach(function(user) {
    if (user.ID === req.body.id) {
      var stud=[];
      stud.push(user);
    console.log("success");
    res.render('databyid',{ students: stud});
    isMatch = true;
    }
    });
    if (!isMatch) {
    // only logs once even though there are multiple users
    console.log("No Match!");
    } 
    });