ハンドルバーでコードの繰り返しを避けるには？

Question

私はこのようなJSONを持っている：

{ 
    "icons-container-set-1" : [ 
     { 
      "data-tab": "tab1", 
      "image" : "researchKO.png", 
      "class-first" : "first", 
      "fragments-title" : "Access award-winning <br> research", 
      "fragments-paragraph" : "..." 
     }, 
     { 
      "data-tab": "tab2", 
      "image" : "WideRangeUp.png", 
      "class-first" : "", 
      "fragments-title" : "A full range <br> of investments", 
      "fragments-paragraph" : "..." 
     } 
    ], 
    "icons-container-set-2" : [ 
     { 
      "data-tab": "tab1", 
      "image" : "im.png", 
      "class-first" : "first", 
      "fragments-title" : "...", 
      "fragments-paragraph" : "..." 
     }, 
     { 
      "data-tab": "tab2", 
      "image" : "img.png", 
      "class-first" : "", 
      "fragments-title" : "...", 
      "fragments-paragraph" : "..." 
     } 
    ] 
} 

これは、タブcomponentesのセットです。 HTMLは次のようになります。セット1と2について

私は変更しています唯一のことは{{#each process.icons-container-set-2}}のコード{{#each process.icons-container-set-1}}の最初の行にある：

{{#each process.icons-container-set-1}} 
    <div class="icons-container {{{class-first}}}" data-tab="{{{data-tab}}}"> 
     <div class="icon-up"> 
      <img src="assets/images/{{{image}}}" alt=""> 
     </div> 
     <p class="fragments-title">{{{fragments-title}}}</p> 
     <p class="fragments-paragraph">{{{fragments-paragraph}}}</p> 
    </div> 
{{/each}} 

ために、任意の提案は、のそのチャンクの繰り返しを避けるためにHTMLのコードですか？

私は上記のHTMLで別のコンポーネントをしましたが、私は同じことを繰り返してする必要があり、実際に私は、タブの唯一の2セットを持っていないことに気づき、6

などがある私があればと思います

のように：{{#each process.icons-container-set-*@GET_INDEX_HERE*}}

提案JSONファイルにセットのインデックスを取得するためのオプションはありますか？

Answer 1

jsonに何かを追加できたら、その要素を反復処理することができます。たとえば、あなたは、アイコン・コンテナ・セットのリストに名前を付けることがあります。

{ 
    "icon-container":[ 
     { 
     "icons-container-set":[ 
      { 
       "data-tab":"tab1", 
       "image":"researchKO.png", 
       "class-first":"first", 
       "fragments-title":"Access award-winning <br> research", 
       "fragments-paragraph":"..." 
      }, 
      { 
       "data-tab":"tab2", 
       "image":"WideRangeUp.png", 
       "class-first":"", 
       "fragments-title":"A full range <br> of investments", 
       "fragments-paragraph":"..." 
      } 
     ] 
     }, 
     { 
     "icons-container-set":[ 
      { 
       "data-tab":"tab1", 
       "image":"im.png", 
       "class-first":"first", 
       "fragments-title":"...", 
       "fragments-paragraph":"..." 
      }, 
      { 
       "data-tab":"tab2", 
       "image":"img.png", 
       "class-first":"", 
       "fragments-title":"...", 
       "fragments-paragraph":"..." 
      } 
     ] 
     } 
    ] 
} 

、その後

{{#each process.icons-container}} 
    {{#each icons-container-set}} 
     <div class="icons-container {{{class-first}}}" data-tab="{{{data-tab}}}"> 
      <div class="icon-up"> 
       <img src="assets/images/{{{image}}}" alt=""> 
      </div> 
      <p class="fragments-title">{{{fragments-title}}}</p> 
      <p class="fragments-paragraph">{{{fragments-paragraph}}}</p> 
     </div> 
    {{/each}} 
{{/each}}