Quick HTML template rendering without using Angular, React Or Vue

The other day I was working on a website, where I had a simple HTML page with a bunch of data to be displayed in a list. The page was static, I received an excel file directly from a Client.

Just need to render the list

Now, in reality, the Client needed me to put the list in a table on the webpage. This list is never going to be changed so why to bother.

But being a developer, things are not easy. I mean, you can't just copy and paste every single line from the excel file to create HTML table line, they are 110 items. We are developers, we are lazy and we certainly can't do hard work, right! :)

So, I thought to be creative. First of all, I grabbed data from excel and convert into JSON.

Big Question: what to use, React, Angular, Vue Or Plain JavaScript

Now, how do I use this JSON to render actually! Oh, I'm React developer, it's not very difficult. Let's start building component. Oh, that is cumbersome. I need the entire infrastructure to create and support a component like Web Pack, Babel, etc.

I needed some simple way to render the JSON data. Should I write my code in core JavaScirpt? Well, I can but then It's too much work, which of course I don't want to do it.

I thought to discuss with my colleagues, all pointed to me React, Angular or Vue which I didn't want to use.

So, finally, I started researching on my own. I stumbled upon this amazing library, named: mustache.js.

Finally, I settled down on Mustache.js

Now, how do I use this library, I thought to create a sample HTML page.

I started with hooking library on the top:

Library from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

HTML:

  <div id='sample'>
        <h4>Welcome to {{state}}!</h4>
        <p>From, {{country}}.</p>
        <p>{{content}}</p>
        <ul>
            {{#cities}}
            <li>{{city}} </li>{{/cities}}

        </ul>
    </div>

JavaScript

var template = document.getElementById('sample').innerHTML;
        var newHtml = Mustache.render(template, {
            state: 'Texas',
            country: 'United States',
            cities: [{
                id: 1,
                city: 'Houston'
            }, {
                id: 2,
                city: 'Dallas'
            }, {
                id: 3,
                city: 'Austin'
            }, {
                id: 4,
                city: 'San Antonio'
            }]

        });
        document.getElementById('sample').innerHTML = newHtml;

Notice the simplicity of mustache.js

What I did is that just prepared my HTML template, referenced the template in my JavaScript, and hooked the JSON using Mustache's object, that's it!

Voila! I saw, what I was looking for!

Conclusion

Sometimes, you just want something simple to solve your problem. You are not in a mood to create a masterpiece out of everything. My problem was similar. I just needed a simple way to render my content, I achieved it!

Finally, A small story of me!

Hi there, I’m Kim and I'm a passionate JavaScript developer.

In recent times, I had to work on large JSON data. Inspecting this kind of complex JSON data was a nightmare using regular viewers and my collogues shared the same feeling.

So, we decided one day to write a tool that makes inspecting and editing JSON easy.

We loved to visualize JSON in Table format, which is of course very easy on your eyes. So the first step was to convert JSON into Table, we achieved that. Then we connected every single table cell to actual JSON.

Finally, we thought that every developer should have access to this amazing tool. We named it JsonGrid. Visit JsonGrid.com.

Let me know what you think about it!

Like and Follow

It really encourages to write more if someone likes your post, so be sure to like it if you enjoyed it!

And Follow me to keep getting new exciting stuff like this!

Comments

[David Dal Busco]

Interesting, didn't know mustache, seems handy.

It would have maybe be also a good use case to be solved with a web component, just a couple of lines of code more and the solution would have been reusable with or without any frameworks.

[Kim John]

Yes, Absolutely!! This time I thought not go by my prior knowledge rather do some research and see if I can get something new and I found it!

[Aivan Monceller]

Or you can do it with no library at all, using tagged template literals

[Kim John]

Yes, I know I could do this but I didn’t want to write code, rather I needed some light weight library that I can consume writing minimal lines of code. Anyway thanks for sharing the code, you wrote nicely, all ES6+ syntax, loved it.