How to correctly pass json data (foundation panini)?

Question

JavaScript

I'm using Gulp + Panini, and I'm trying to transfer data according to the scheme from the video .

The problem is that the .YML file transmits data correctly, but the .JSON file does not transmit data, more precisely, it transmits empty values. Below is an example to illustrate.

scr/index.html

<div class="sidebar">
  {{#repeat 2}} 
  {{#each navyml.item}}
  <a href="{{root}}" class="sidebar__item">{{text}}</a>
  {{/each}}
  {{/repeat}}

  {{#repeat 2}}
  {{#each navjson.item}}
  <a href="{{root}}" class="sidebar__item">{{text}}</a>
  {{/each}}
  {{/repeat}}
</div>

scr/data/navyml.yml

item:
 -
  text: item-yml

scr/data/navjson.yml

{
  "item": {
    "text": "item-json"
  }
}

build/index.html

<div class="sidebar">
  <a href="" class="sidebar__item">item-yml</a>
  <a href="" class="sidebar__item">item-yml</a>

  <a href="" class="sidebar__item"></a>
  <a href="" class="sidebar__item"></a>
</div>

Maybe I'm wrong somewhere. Help.

Answer 1

Strange, but that's how it works.
Deleted item here

scr/index.html

<div class="sidebar">
  {{#repeat 2}}
  {{#each navjson}}
  <a href="{{root}}" class="sidebar__item">{{text}}</a>
  {{/each}}
  {{/repeat}}
</div>

Here I lured the item variable to navjson so that the variable matches the file name.

scr/data/navjson.json

{
  "navjson": {
    "text": "item-json"
  }
}