Mustache: Bloody Brilliant

  • Brilliant Documentation
  • Obvious how to use
  • Solves a tricky issue

My explanation

The problem it solves

const jsonData = 
{ data: [
{ name : "Alice", likes : ["apples","archery"] },
{ name : "Becky", likes : ["beagles","boxing", "bodyboarding"] },
{ name : "Charlie", likes : ["cheese", "chess"] }
]
}

What do you need to put in?

<div>
<h1> This is Name </h1>
<h3>Name likes:</h3>
<ul><li>Item1</li><li>Item2</li></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.js" type="text/x-mustache-template"></script>

What does this code actually look like then?

The template part

<script id="emptyTemplate" type="text/html">{{#data}}Hello {{ name }}!<br><p>{{likes}}</p><br>{{/data}}</script>
Note the difference type makes. Ignore the code in here though! It is just an example.
{ data: [
{ name : "Alice", likes : ["apples","archery"] },
{ name : "Becky", likes : ["beagles","boxing", "bodyboarding"] },
{ name : "Charlie", likes : ["cheese", "chess"] }
]
}
-----------
{{#data}}
Hello {{ name }}!<br><p>{{likes}}</p>

The script part

function loadData(dataIn) {let template = document.getElementById("template").innerHTML;let rendered = Mustache.render(template, dataIn);document.getElementById("target").innerHTML = rendered;};

The Target part

<div id="target">Loading...</div>

Done

--

--

--

Focused on saving our time: everyhour.xyz for your life balance; tree-meals-a-day.earth for our food emissions and compairbnb.info/hello for booking airbnbs.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Day 6 of 16— ”Property Decorators”

Text To Speech

Making a simple API using Appwrite

React Form validation with Formik, Material-UI and Yup

All your packages are belong to us. On npm, HTTP, and CJK.

A doodle of Smaug from The Hobbit with the word hoard in Chinese, Malay, and English on the left.

How to write mock fetch unit test with Jest

Redux Reducers

React redux

Retrying and Exponential Backoff With Promises

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ACGoff

ACGoff

Focused on saving our time: everyhour.xyz for your life balance; tree-meals-a-day.earth for our food emissions and compairbnb.info/hello for booking airbnbs.

More from Medium

This is how I would explain higher-order array methods to a 5 year old

Exploring ECMAScript6

Javascript just-in-time Compilation

VARIABLES, COMMENTS, & DATATYPES IN JAVASCRIPT