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

Question

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);

AJ Hurst · Accepted Answer · 2019-10-23 15:27:34Z

1

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 })
});

answered Oct 23, 2019 at 15:27

AJ Hurst

3684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prajwal J Shetty Over a year ago

But using pug is like making a new html file. What I asked for is , if I have a lot of things in the html file , that I don't want to write it onto a pug file, how do I append songs:rows into 'main-page'.

Aykhan · Accepted Answer · 2019-10-23 15:10:47Z

0

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.

answered Oct 23, 2019 at 15:10

Aykhan

4735 silver badges12 bronze badges

Comments

Shiva · Accepted Answer · 2019-10-23 18:20:28Z

0

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).

answered Oct 23, 2019 at 18:20

Shiva

5531 gold badge6 silver badges21 bronze badges

2 Comments

Prajwal J Shetty Over a year ago

Can you send a sample code(pseudo code) snippet so that I get can the idea.

Shiva Over a year ago

Clone this( github.com/shivakumara-m/NodeJS-Login-App. ) project from github. See how login api is written, which sends only data (whether login is success or not). Based on this api response you can modify your html contents. If you are beginner in this, i suggest you to Youtube some tutorials on jquery "how to call api using jquery"

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related