0

Tengo una serie de datos que van a ser referenciados en diferentes partes de la página, por una lado se va a un índice con enlaces a otras partes con más detalle. Y el problema que tengo es que se duplican los IDs (lo cual es malo porque es HTML no válido y las referencias fallan).

Aquí se puede ver un ejemplo funcionando con el problema. Drácula tiene alergia al sol, que le produce dos tipos de reacciones, pero como las reacciones no tienen identificador, el ID generado para cada una de ellas es el mismo:

var paciente = {
  "nombre": "Drácula",
  "alergias": [
    {
      "id": 1,
      "nombre": "Sol",
      "reacciones": [
        {
          "nombre": "Urticaria",
          "gravedad": "Baja",
          "descripcion": "Ocurre en pequeñas dosis."
        },
        {
          "nombre": "Quemaduras",
          "gravedad": "Alta",
          "descripcion": "Puede producir la muerte del paciente."
        }
      ]
    },
    {
      "id": 2,
      "nombre": "Cruces",
      "reacciones": [
        {
          "nombre": "Quemaduras",
          "gravedad": "Media",
          "descripcion": "Al contacto."
        }
      ]
    }
  ]
};

var fuente = $("#alergias-template").html();
var template = Handlebars.compile(fuente);
var output = template(paciente);
$("body").append(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script id="alergias-template" type="text/x-handlebars-template">
<section id="allergies">
  <h1>Alergias de {{nombre}}</h1>
  <ul>
    {{#each alergias}}
    <li>
      {{nombre}}
      <ul>
        {{#each reacciones}}
        <li><a href="#alergia{{../id}}reaccion">{{nombre}}</a></li>
        {{/each}}
      </ul>
    </li>
    {{/each}}
  </ul>
  <h2>Descripción</h2>
  {{#each alergias}}
  <section>
    <h3>{{nombre}}</h3>
    <div>
      Esta alergia produce:
      <ul>
      {{#each reacciones}}
      <li id="alergia{{../id}}reaccion">
        {{nombre}} de gravedad {{gravedad}}.<br/> {{descripcion}}
      </li>
      {{/each}}
      </ul>
    </div>
  </section>
  {{/each}}
</section>
</script>

¿Existe alguna manera de añadir un contador del elemento que se está procesando en una colección dentro del {{#each}}? De ese modo podría añadir ese contador al identificador de las reacciones y solucionar mi problema de los IDs duplicados.

Nota: los valores de la variable paciente realmente son el resultado de una llamada a una API que yo no controlo, por lo que no puedo cambiarlos de ninguna manera. Si no, simplemente añadiría una propiedad "id" a las reacciones y ya estaría listo.

1 respuesta 1

1

Puedes utilizar @index asi:

var paciente = {
  "nombre": "Drácula",
  "alergias": [
    {
      "id": 1,
      "nombre": "Sol",
      "reacciones": [
        {
          "nombre": "Urticaria",
          "gravedad": "Baja",
          "descripcion": "Ocurre en pequeñas dosis."
        },
        {
          "nombre": "Quemaduras",
          "gravedad": "Alta",
          "descripcion": "Puede producir la muerte del paciente."
        }
      ]
    },
    {
      "id": 2,
      "nombre": "Cruces",
      "reacciones": [
        {
          "nombre": "Quemaduras",
          "gravedad": "Media",
          "descripcion": "Al contacto."
        }
      ]
    }
  ]
};

var fuente = $("#alergias-template").html();
var template = Handlebars.compile(fuente);
var output = template(paciente);
$("body").append(output);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script id="alergias-template" type="text/x-handlebars-template">
<section id="allergies">
  <h1>Alergias de {{nombre}}</h1>
  <ul>
    {{#each alergias}}
    <li>
      {{nombre}}
      <ul>
        {{#each reacciones}}
        <li><a href="#alergia{{../id}}{{@index}}reaccion">{{nombre}}</a></li>
        {{/each}}
      </ul>
    </li>
    {{/each}}
  </ul>
  {{#each alergias}}
  <h2>Descripción</h2>
  <section>
    <h3>{{nombre}}</h3>
    <div>
      Esta alergia produce:
      <ul>
      {{#each reacciones}}
      <li id="alergia{{../id}}reaccion">
        {{nombre}} de gravedad {{gravedad}}.<br/> {{descripcion}}
      </li>
      {{/each}}
      </ul>
    </div>
  </section>
  {{/each}}
</section>
</script>

2
  • Esto funciona en el caso de que sólo haya una alergia, porque si hay varias (he editado la pregunta para reflejarlo), volverá a haber IDs repetidos. De todos modos, esta solución me vale, sólo habría que mover el {{@index}} al final del ID (manteniendo el id de la alergia).
    – Alvaro Montoro
    el 16 jul. 2018 a las 16:46
  • 1
    Claro, solo seria de utilizar el ID para identificar cada uno. Ya edite mi respuesta.
    – alanfcm
    el 16 jul. 2018 a las 16:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.