How to add innerHTML into a static file sent from node JS?

user_12159945 0
Viewed 1092

I am trying to do a music player site. I send the static file "Music_file.html" in node JS , after that I use database in nodeJS to get a list of songs related information , and attach it to the class 'song-item'. The content of song-item will be in a string for simplcity. I want to append the string as an innerHTML of the class 'main-page'.

Music_site.html

<html>

   <body>
        <div class='main-page'>

                  <div class='song-item'>
                      <div class='song-item-thumbnail'>  <img class='thumbnail' src='./thumbnail/bluedaa.jpg'>  </div>
                      <div class='song-item-song-info'>   Blue daa        </div>   
                      <div class='song-item-filename'>./songs/bluedaa.mp3</div>
                  </div>

        </div>

    </body>

</html>

The file for node JS: loginserver.js

ar http=require('http')
var fs=require('fs')
var querystring=require('querystring')
var nodemailer=require('nodemailer')
var MongoClient=require('mongodb').MongoClient
var express=require('express');

var app = express();
app.get('/' , function(req,res){
    res.writeHead(200,{"Content-Type":"text/html"});
    fs.createReadStream("signup.html","UTF-8").pipe(res);
}
);

app.use('/', express.static(__dirname)   );
//POST function
app.post('/',function(req,res){
    var data=""
    req.setEncoding('UTF-8')
    req.on('data',function(chunk){
        data+=chunk;
    });
    req.on('end',function()
    {

    })//req.on 



    res.writeHead(200,{"Content-Type":"text/html"});
    fs.createReadStream("./Music_site.html","UTF-8").pipe(res);

    /* Get the song information from the database  */
    /* append it to the class 'main-page'   */


});



app.listen(8000);

The pseudocode to get the song info and append it to a string

var content='';

var cur = sqlite3.execute('SELECT * from SONGS');
for row in cur
{
  content+="<div class='song-item'>  <div class='song-item-thumbnail'>  <img class='thumbnail' src=' ";
  content+ = row.imgsrc;
  content+ = "'>  </div>  <div class='song-item-song-info'> ";
  content+ = row.songname;
  content+= "</div>   <div class='song-item-filename'> ";
  content+ = row.filename;
  content+ = "</div>  </div>";

}

'.main-page'.append(content);
express node.js html jquery javascript
3 Answers

I'd recommend using a templating engine. Here's a list of options https://colorlib.com/wp/top-templating-engines-for-javascript/ . Pug is popular: https://expressjs.com/en/guide/using-template-engines.html

To get Pug working, create a template file called 'views/songs.pug':

html
    body
        div.main-page
            each song in songs
                div.song-item
                    div.song-item-thumbnail
                        img.thumbnail(href=song.thumbnail)
                    div.song-item-song-info=song.name
                    div.song-item-filename=song.filename

Then in express, add the following bits of code:

app.set('view engine', 'pug')
app.get('/', function (req, res) {
    let sql = 'SELECT * from SONGS';
    db.all(sql, [], (err, rows) => {
       if (err) {
            throw err;
       }
       res.render('songs', { songs: rows })
});
user_31241910

You could add onload function to "Music_site.html" that will send GET request to your nodejs server and get that string. Then append fetched string to any element in the dom.

user_117378240

The better way to achieve this would be by writing APIs. Then call the api to fetch songs. On API response, modify your html using javascript/jquery or any other javascript library/framework(angular/react).

user_32144310
Related