Displaying updated information from jquery to a wordpress site?

Question

css

Hello. There is a jquery code that displays information about the song currently playing on the radio:

var nowPlayingTimeout;
var nowPlaying;

function loadNowPlaying() {
    $.ajax({
        cache: false,
        dataType: "json",
        url: 'http://sait.com/api/nowplaying/station_shortcode',
        success: function(np) {
            // Do something with the Now Playing data.
            nowPlaying = np;

            nowPlayingTimeout = setTimeout(loadNowPlaying, 15000);
        }
    }).fail(function() {
        nowPlayingTimeout = setTimeout(loadNowPlaying, 30000);
    });
}

$(function() {
    loadNowPlaying();
});

How can I display this information on a wordpress site so that the information automatically changes when switching songs to the next one? If possible, please show an example code.

Answer 1

The question has nothing to do with WP.
You need to hook onto some element by class and change information in it using, say, innerHTML .
But with regards to WP, you can create a tag with a class in the templates, where you will write with pens. Or display the html widget (this is also available out of the box).
What to write depends solely on what comes to your variable npfrom api.

Answer 2

$(".your-class").append("<p>"+nowPlaying+"</p>");

Answer 3

Added a checked line at the end of the script -

$('#nowplaying-song').text(np.now_playing.song.text);

added to styles -

#nowplaying-song {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
  margin-top: 8px;
  font-family: monospace;
}

added to the site page - Information is not displayed ... I can not understand what is missing or what I am doing wrong. The script is working and information about the playing song and artist should be displayed. Help me please.
<div id="nowplaying-song"></div>