how to iterate over objects of objects and display in mustache template

Question

I have the following data structure

{ 'the-subtle-art-of-not-givng-a-f': { "id: "test", "title": "test"}, "the-hamset": {"id": "test", "title": "test"}}

how can I display the title in a mustache template?

Answer 1

jQuery

HTML:

<div id="output">

</div>

<script type="text/template" id="titles">
    <ul>
        {{#titles}}
            <li>{{title}}</li>
        {{/titles}}
    </ul>
</script>

JS:

$(document).ready(function(){
    const template = $('#titles').html();
    const output = $('#output');

    const object = {
        'the-subtle-art-of-not-givng-a-f': {
            "id": "test", "title": "test1"
        },
        "the-hamset": {
            "id": "test", "title": "test2"
        }
    };

    let titles = [];
    for (const property in object) {
        if (object.hasOwnProperty(property)) {
            if (object[property].title) {
                titles.push( { title: object[property].title });
            }
        }
    }

    const data = { titles };

    const result = Mustache.render(template, data);
    output.append(result);
});

Example

---

Vanilla JS:

HTML:

<div id="output">

</div>

<script type="text/template" id="titles">
    <ul>
        {{#titles}}
            <li>{{title}}</li>
        {{/titles}}
    </ul>
</script>

JS:

const callback = function() {
  const template = document.querySelector('#titles').innerHTML;
  const output = document.querySelector('#output');

  const object = {
    'the-subtle-art-of-not-givng-a-f': {
     "id": "test", "title": "test1"
    },
    "the-hamset": {
     "id": "test", "title": "test2"
    }
  };

  let titles = [];
  for (const property in object) {
    if (object.hasOwnProperty(property)) {
      if (object[property].title) {
        titles.push( { title: object[property].title });
      }
    }
  }

  const data = { titles };
  const result = Mustache.render(template, data);
  output.innerHTML = output.innerHTML + result;
};

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}

Example