CODEWITHSUNDEEP
arrayshandlebars.js
Chunky Low
Chunky Low

Reputation: 79

Accessing an array within another array with handlebars

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;
}

Upvotes: 0

Views: 47

Answers (1)

Avinash
Avinash

Reputation: 1243

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

Upvotes: 1

Related Questions