Updating a section of a webpage with using new data from node.js backend

You'll want to use ajax.

You can create a new route on your nodejs server that returns song data as json rather than rendering an EJS file to the client.

Imagine your code is currently like this:

app.get('/songinfo', function(req, res) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    res.render('songinfo.ejs', data);
  });
});

You can change it to the following:

function getSongInfo(callback) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    callback(data);
  });
}

app.get('/songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.render('songinfo.ejs', data);
  });
});

app.get('/raw-songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.setHeader('content-type', 'application/json');
    res.send(data);
  });
});

What I've done here is pull out the getSongInfo logic to keep our app DRY, and added a second route that also uses that function, and rather than sending back the data in an ejs file, sends it back in json. Now, in your ejs file, you can add the logic for calling this route:

<button onclick='reloadData()'> Reload me! </button>
<script type='text/javascript'> 
  function reloadData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if(xmlhttp.status == 200){
          // Update the data in your app somehow...
          // example:
          var responseData = JSON.parse(xmlhttp.responseText);
          document.getElementById('songs-count').innerHTML = responseData.length;
        } else {
          alert('something went wrong!');
        }
      }
    }
  }
</script>