Formatting Text from APIs in JavaScript

Oftentimes, when building a web application and sourcing information from APIs, the resulting text that is produced from a standard fetch request can come in strange forms— for example, in my case, a description for a TV show came riddled with HTML tags such as <p> and </i> that I did not want showing in my application. In another situation, perhaps a list of names comes in an array and you’d like these to be separated by commas on one line. So how do we fix this? Well, it depends on the situation, but here are some solutions I found effective.

Let’s begin with the example of a description with some stray HTML tags. Let’s first examine how a block of text (a description of the show How I Met Your Mother) may look before implementing the solution I found:

“<p><b>How I Met Your Mother</b> is a comedy about Ted and how he fell in love. It all starts when Ted’s best friend, Marshall drops the bombshell that he’s going to propose to his long-time girlfriend, Lily, a kindergarten teacher. At that moment, Ted realizes that he had better get a move on if he too hopes to find true love. Helping him in his quest is Barney a friend with endless, sometimes outrageous opinions, a penchant for suits and a foolproof way to meet women. When Ted meets Robin he’s sure it’s love at first sight, but destiny may have something else in store.</p>”

Obviously, this is not ideal to display on a website. The HTML tags will not do their intended function and will remain an ugly stain on the text. So how did I fix this using JavaScript? Firstly, I initialized an array full of tags I would find in a block of text like so:

const replaceTags = ['<p>', '</p>', '<b>', '</b>', '<i>', '</i>', '<br />', '<br />']

These were the tags I tended to find in these text blocks. I may not have covered every possible base, but this was efficient enough to clean up most of the stray clutter in each description. The following is the rest of the code I implemented:

currentShow = await getShows()
let description = currentShow.summary
replaceTags.forEach(element => description = description.replace(element, ''))

For context, “getShows()” is my function that would send a fetch request to the API I was sourcing my information from. From there, I would put the value attached to the returned object’s “summary” key into a variable I named “description”. After that, I used the replaceTags array I initialized earlier and called the forEach method to iterate through the array and replace each tag found in my description with, well, nothing— an empty string. By the end of this iteration, this was my new description that displayed on my webpage:

How I Met Your Mother is a comedy about Ted and how he fell in love. It all starts when Ted’s best friend, Marshall drops the bombshell that he’s going to propose to his long-time girlfriend, Lily, a kindergarten teacher. At that moment, Ted realizes that he had better get a move on if he too hopes to find true love. Helping him in his quest is Barney a friend with endless, sometimes outrageous opinions, a penchant for suits and a foolproof way to meet women. When Ted meets Robin he’s sure it’s love at first sight, but destiny may have something else in store.

See? All cleaned up!

Let’s look at another example.

Here we have another instance from the same API– in this API, the genres for each show are organized into an array. I wanted to be able to pull out these values, but simply iterating through the array and placing them into a <p> tag’s textContent would create a clobbered together mess like so:

“DramaRomanceMystery”

Whereas, for stylistic reasons, I wanted to have it look something like this:

DRAMA, ROMANCE, MYSTERY

So how could I do this? Well, first, we need to figure out where and when to place these commas. The first thing is to set the base textContent of the genres element in the HTML (no matter what, “Genre(s): ” will be showing):

showGenres.textContent = 'Genre(s): '

Next, let’s set up a for loop to iterate through the array of genres pulled from my fetch request, genres equaling the aforementioned currentShow’s “genres” value:

for(let i=0; i<genres.length; i++)
{
}

Simple. Then, we use some conditional logic to figure out where and when we should place these commas and spaces and put it within the for loop:

if(genres.length>=1 && genres[i] !== genres[genres.length-1])
{
      showGenres.textContent += genres[i] += ', '
}
else if(genres[i] == genres[genres.length-1])
{
       showGenres.textContent +=  genres[i]
}

Here, the first conditional that runs is seeing if the array of genres is greater than one and that the element currently being iterated over is not the last one in the array. In this case, we would continue to add the genre with a comma and a space following it. Otherwise, if it is the last element, no comma should be added. This also functions the same way for shows that may only have one genre in their associated array. But what if there’s no genres applied to the show at all? In this case, I simply put this outside of the for loop:

if(genres.length===0)
{
showGenres.textContent = 'Genres: N/A'
}

And then, to make it all nice and uppercase:

showGenres.textContent = showGenres.textContent.toUpperCase()

Now, it’s perfect! No sloppy looking text for our genres element.

I hope you guys found this helpful. As a perfectionist like me, I can’t stand to have something looking messy or odd.