如何使用每个把手

时间:2017-10-24 21:06:48

标签: javascript handlebars.js

我的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

How do I need it to look

1 个答案:

答案 0 :(得分:0)

您可以在循环访问Movimientos数组时访问resultado.Detalle对象来执行此操作:

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

假设您已经注册了以下帮助者:numerosnumerosEnteros。在sandbox中试用,只需删除NUMEIMPOACUM值旁边的内容。