skip to Main Content
app.get('/api/getTransactions/', function(req, res){
  console.log("GET: Transactions");

  let sql = 'SELECT * FROM balance;';
  db.all(sql, [], function(err, rows){
        var result = {};
    if(err){
      res.status(404);
      result["error"] = err.message;
    } else {
        console.log(JSON.stringify(rows));
        res.json(rows);
    }
  });
});


function createTL() {
  $.ajax({
    method: "GET",
    url: "/api/getTransactions/",
    data: {}
  }).done(function(rows){
    console.log("Request to fetch transactions");
    if("error" in rows){
      console.log(rows["error"]);
    } else {
      $(".tl").html('');
      var tList = '';
      console.log("Got Here");
      console.log(rows.length);
      for(var i=0; i++; i < rows.length){
        console.log("data");
        tList += '<li>Transaction: ' + rows[i].id + ' - ' + rows[i].text + ' - $' + rows[i].amount + '</li>';
        console.log(rows[i].id + " - " + rows[i].text + " - " + rows[i].amount);
      }
      $(".tl").html(tList);
    }
  });
}

There is no problem connecting to the database, and I can get the number of entries being retrieved from rows.length, but I can’t figure out why I can’t translate the rows into li elements. Also, the first function is from the express app file, while the second function createTL() is from a static_files directory.

UPDATE: I got it working by altering the way the data was being sent and received, this is the working code.

app.get('/api/getTransactions/', function(req, res){
    var transactions = [];
  console.log("GET: Transactions");

  let sql = 'SELECT * FROM balance;';
  db.all(sql, [], function(err, rows){
        var result = {};
    if(err){
      res.status(404);
      result["error"] = err.message;
            res.json(result);
            console.log(JSON.stringify(result));
    } else {
      rows.forEach((row) => {
                transactions.push(row);
      });
            res.json(transactions);
      console.log(JSON.stringify(transactions));
    }
  });
});

function createTL() {
  $.ajax({
    method: "GET",
    url: "/api/getTransactions/",
    data: {}
  }).done(function(rows){
    console.log("Request to fetch transactions");
    if("error" in rows){
      console.log(rows["error"]);
    } else {
      $("#tl").html('')
      var tList = '';
      for(var i=0; i<rows.length; i++){
        tList += '<li>ID: ' + JSON.stringify(rows[i]["id"]) + ' - ' + JSON.stringify(rows[i]["text"]) + '- $' + JSON.stringify(rows[i]["amount"]) + '</li>';
      }
      $("#tl").html(tList);
    }
  });
}

2

Answers


  1. Chosen as BEST ANSWER

    UPDATE: I got it working by altering the way the data was being sent and received, this is the working code.

    app.get('/api/getTransactions/', function(req, res){
        var transactions = [];
      console.log("GET: Transactions");
    
      let sql = 'SELECT * FROM balance;';
      db.all(sql, [], function(err, rows){
            var result = {};
        if(err){
          res.status(404);
          result["error"] = err.message;
                res.json(result);
                console.log(JSON.stringify(result));
        } else {
          rows.forEach((row) => {
                    transactions.push(row);
          });
                res.json(transactions);
          console.log(JSON.stringify(transactions));
        }
      });
    });
    
    function createTL() {
      $.ajax({
        method: "GET",
        url: "/api/getTransactions/",
        data: {}
      }).done(function(rows){
        console.log("Request to fetch transactions");
        if("error" in rows){
          console.log(rows["error"]);
        } else {
          $("#tl").html('')
          var tList = '';
          for(var i=0; i<rows.length; i++){
            tList += '<li>ID: ' + JSON.stringify(rows[i]["id"]) + ' - ' + JSON.stringify(rows[i]["text"]) + '- $' + JSON.stringify(rows[i]["amount"]) + '</li>';
          }
          $("#tl").html(tList);
        }
      });
    }
    

  2. Check your console for errors or your html source for anything that might be rendered, perhaps incorrectly. This is based off your work and run’s on jsfiddle:

    <ul class="tl">
    
    </ul>
    

    JS

    var rows = [
    {id: 62, amount: 65, text: "Refund"},
    {id: 64, amount: -63, text: "Groceries"},
    {id: 65, amount: -103.51, text: "Stock Loss"},
    {id: 66, amount: 35.72, text: "Dividend"} 
    ];
    
    var $tList = $('.tl');
    var tList = '';
    
    for(var i=0; i < rows.length; i++){
            tList += '<li>Transaction: ' + rows[i].id + ' - ' + rows[i].text + ' - $' + rows[i].amount + '</li>';
    }
    
    $tList.html(tList);
    

    https://jsfiddle.net/pxLvbse0/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search