amp-list inside amp-list

Question

I have this json of posts

    {
  "items": [
    {
      "titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
      "resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
      "imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
      "autor": "Redacción xxxxx",
      "creacion": "2021-03-26T05:00:00.000Z",
      "etiquetas": [
        "Compra",
        "Subsidio",
        "No VIS"
      ],
      "id": "605e63d7bd314031df227b13"
    },
    {
      "titulo": "Subarriendo ¿legal o no?",
      "resumen": "Algunos inquilinos deciden subarrendar sin el consentimiento del dueño, ¿Es ilegal este procedimiento?.",
      "imagen": "https://xxxxxx/blog/entries/SubarrendarLegalONo/image.jpg",
      "autor": "Redacciónxxxxxx",
      "creacion": "2021-02-20T05:00:00.000Z",
      "etiquetas": [
        "Arriendo"
      ],
      "id": "6031b3c018ea033afbbf3f6b"
    }
]
}

I'm using amp to loop through them and paint them like this using pug (jade)

amp-list(
            layout="fixed-height",
            height="460",
            src="/json/posts.json"           )
            template(type="amp-mustache")
                div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
                  div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
                    div(class='bg-imagen' style='background-image: url("{{imagen}}");')
                      div(class="etiquetas")
                       span(class="etiqueta") {{etiquetas}}
                    div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
                      h4
                         a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
                      div(class='fecha')
                        i(class='fas fa-calendar-alt')
                        span(class='texto') {{creacion}}
                      p {{resumen}}

Give something like this

but what i want to achieve is this

However my problem arises when I want to go through the key labels that is an array within each post and that contains a string and I have not been able to make the amp-list work within the amp-list like this for example

amp-list(
        layout="fixed-height",
        height="460",
        src="/json/posts.json"           )
        template(type="amp-mustache")
            div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
              div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
                div(class='bg-imagen' style='background-image: url("{{imagen}}");')
                  div(class="etiquetas")
                    amp-list( layout="fixed-height",  height="460", [src]="etiquetas")
                      template(type="amp-mustache")
                        span(class="etiqueta") {{ . }}
                div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
                  h4
                     a(href="'/resvista/post/'+id" target="_blank") {{titulo}}
                  div(class='fecha')
                    i(class='fas fa-calendar-alt')
                    span(class='texto') {{creacion}}
                  p {{resumen}}

I'm not sure if an amp-list can be used inside another amp-list and how to pass the array to the second amp-list

Answer 1

best solution for this situation is to use a loop inside your mustache template

loop in mustache: https://codepen.io/johnsonshara/pen/mPzbBO

    {
  "items": [
    {
      "titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
      "resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
      "imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
      "autor": "Redacción xxxxx",
      "creacion": "2021-03-26T05:00:00.000Z",
      "etiquetas": [
        {"etiqueta_key":Compra"},
        {"etiqueta_key":"Subsidio"},
        {"etiqueta_key":"No VIS"}
      ],
      "id": "605e63d7bd314031df227b13"
    }
]
}


amp-list(
    layout="fixed-height",
    height="460",
    src="/json/posts.json"           )
    template(type="amp-mustache")
        div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
          div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
            div(class='bg-imagen' style='background-image: url("{{imagen}}");')
              div(class="etiquetas")
                {{#etiquetas}}
                    span(class="etiqueta")  {{etiqueta_key}}
                {{/etiquetas}}

            div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
              h4
                 a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
              div(class='fecha')
                i(class='fas fa-calendar-alt')
                span(class='texto') {{creacion}}
              p {{resumen}}