Accessing an array within another array with handlebars

Question

I currently have a JSON file with the following data:

{
"Chapter1": {
    "items": [{
        "English Word": "EnglishTest1",
        "Kanji": "JapTest1",
        "Hiragana": "HiraganaTest1"
    }, {
        "English Word": "EnglishTest2",
        "Kanji": "JapTest2",
        "Hiragana": "HiraganaTest2"
    }, {
        "English Word": "EnglishTest3",
        "Kanji": "JapTest3",
        "Hiragana": "HiraganaTest3"
    }, {
        "English Word": "EnglishTest4",
        "Kanji": "JapTest4",
        "Hiragana": "HiraganaTest4"
    }, {
        "English Word": "EnglishTest5",
        "Kanji": "JapTest5",
        "Hiragana": "HiraganaTest5"
    }, {
        "English Word": "EnglishTest6",
        "Kanji": "JapTest6",
        "Hiragana": "HiraganaTest6"
    }, {
        "English Word": "EnglishTest7",
        "Kanji": "JapTest7",
        "Hiragana": "HiraganaTest7"
    }]
}
}

With handlebars, I'm trying to make it so that each of the the items under "English Words" are marked as headers. However, nothing seems to show up. Here's the script I'm currently using:

<script id="wordsTemplate" type="text/x-handlebars-template">
    {{#each Chapter1.items}}
       <div class="info-column">
          <h2>{{English Word}}</h2>
       </div>
    {{/each}}
</script>

and the JS file:

var ourRequest = new XMLHttpRequest();
function createHTML(wordsData) {
  var rawTemplate = document.getElementById("wordsTemplate").innerHTML;
  var compiledTemplate = Handlebars.compile(rawTemplate);
  var ourGeneratedHTML = compiledTemplate(wordsData);
  var wordsContainer = document.getElementById("words-container");
  wordsContainer.innerHTML = ourGeneratedHTML;
}

Avinash · Accepted Answer · 2018-06-30 11:48:56Z

1

In your json remove the space for English Word and make the fields like this -
"EnglishWord": "EnglishTest1",
then in your template use as below

<script id="wordsTemplate" type="text/x-handlebars-template">
 {{#each Chapter1.items}}
   <div class="info-column">
      <h2>{{EnglishWord}}</h2>
   </div>
 {{/each}}
</script>

It is not working due to the space in English Word

answered Jun 30, 2018 at 11:48

Avinash

1,24312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing an array within another array with handlebars

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related