2017-10-24 8 views
0

マイJSONハンドルバーにする方法:どのように私はそれが見えるようにすることができ

{ 
    "resultado": { 
    "Detalle": [ 
     { 
     "Movimientos": [ 
      { 
      "CPTE": "S.A.", 
      "IMPO": null, 
      "DETA": "SALDO ANTERIOR", 
      "ESPE": "", 
      "ACUM": "-39369.06", 
      "NUME": "0", 
      "CANT": null, 
      "PCIO": "0", 
      "FEC1": "", 
      "FEC2": "" 
      } 
     ], 
     "MONE": "USD" 
     }, 
     { 
     "Movimientos": [ 
      { 
      "CPTE": "NCCD", 
      "IMPO": "1000", 
      "DETA": "", 
      "ESPE": "", 
      "ACUM": "-100072", 
      "NUME": "7", 
      "CANT": null, 
      "PCIO": "0", 
      "FEC1": "20/10/17", 
      "FEC2": "20/10/17" 
      }, 
      { 
      "CPTE": "S.A.", 
      "IMPO": null, 
      "DETA": "SALDO ANTERIOR", 
      "ESPE": "", 
      "ACUM": "-101072", 
      "NUME": "0", 
      "CANT": null, 
      "PCIO": "0", 
      "FEC1": "", 
      "FEC2": "" 
      } 
     ], 
     "MONE": "USD MEP" 
     } 
    ], 
    "Totales": [ 
     { 
     "DETA": "NCCD - NOTA DE CREDITO CONVERSION U$D", 
     "IMPO": "1000", 
     "MONE": "USD MEP" 
     } 
    ] 
    } 
} 

が好き:

HTML

<table style="margin-top: 20px"> 
 
    <thead> 
 
     <tr> 
 
      <th style="text-align: left; padding-left: 0px">Especie</th> 
 
      <th style="text-align: center; padding-left: 0px">Cpte</th> 
 
      <th style="text-align: center; padding-left: 0px">Liquida</th> 
 
      <th style="text-align: center; padding-left: 0px">Operado</th> 
 
      <th style="text-align: right">N° de Cpte</th> 
 
      <th style="text-align: right">Cantidad</th> 
 
      <th style="text-align: right">Precio</th> 
 
      <th style="text-align: right">Saldo</th> 
 
      <th style="text-align: left; padding-left: 10px">Referencia</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     {{#each info}} 
 
     <tr> 
 
      <th style="text-align: left; color: black">{{ESPE}}</th> 
 
      <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{CPTE}}</th> 
 
      <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{FEC1}}</th> 
 
      <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{FEC2}}</th> 
 
      <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numerosEnteros NUME}}</th> 
 
      <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numeros IMPO}}</th> 
 
      <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{PCIO}}</th> 
 
      <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numeros ACUM}}</th> 
 
      <th style="text-align: left; font-size: 11px; font-weight: 600; color: black; padding-left: 10px">{{DETA}}</th> 
 
     </tr> 
 
     {{/each}} 
 
    </tbody> 
 
</table>

PICTURE:あなたはresultado.Detalle配列をループしながら、Movimientosオブジェクトにアクセスすることでそれを行うことができます

How do I need it to look

+1

これまでに何がありますか?あなたはどれくらいの距離を持っていますか?あなたはハンドルバーのドキュメントをgoogledしましたか? –

答えて

0

<table style="margin-top: 20px"> 

<thead> 
    <tr> 
     <th style="text-align: left; padding-left: 0px">Especie</th> 
     <th style="text-align: center; padding-left: 0px">Cpte</th> 
     <th style="text-align: center; padding-left: 0px">Liquida</th> 
     <th style="text-align: center; padding-left: 0px">Operado</th> 
     <th style="text-align: right">N° de Cpte</th> 
     <th style="text-align: right">Cantidad</th> 
     <th style="text-align: right">Precio</th> 
     <th style="text-align: right">Saldo</th> 
     <th style="text-align: left; padding-left: 10px">Referencia</th> 
    </tr> 
</thead> 
<tbody> 
{{#each resultado.Detalle}} 
    {{#Movimientos}} 
    <tr> 
     <th style="text-align: left; color: black">{{ESPE}}</th> 
     <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{CPTE}}</th> 
     <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{FEC1}}</th> 
     <th style="text-align: center; font-size: 11px; font-weight: 600; color: black">{{FEC2}}</th> 
     <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numerosEnteros NUME}}</th> 
     <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numeros IMPO}}</th> 
     <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{PCIO}}</th> 
     <th style="text-align: right; font-size: 11px; font-weight: 600; color: black">{{numeros ACUM}}</th> 
     <th style="text-align: left; font-size: 11px; font-weight: 600; color: black; padding-left: 10px">{{DETA}}</th> 
    </tr> 
    {{/Movimientos}} 
{{/each}} 
</tbody> 
</table> 

あなたはヘルパー以下登録したと仮定すると:numerosnumerosEnterossandboxで試してみてください。まず、NUMEIMPOACUMの値の横の数字を削除してください。