Go through JSON sub node in vueJs

Question

Go through JSON sub node in vueJs

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

"bloques": [
    {
      "id": 1,
      "banner": "Banner_Doble_Megas_terminales2.jpg",
      "titulo": "Blindaje",
      "activo": 1,
      "contenidos": [
        {
          "id": 1,
          "subseccion": 0,
          "icon": "fa fa-copy",
          "nombre": "Guía Rápida",
          "pdf": "pymes.pdf",
          "imagenes": "",
          "bloque_id": 1,
          "ruta": null,
          "activo": 1
        },

I can easily reccure the blocks in the following way:

<tr v-for="(bloque, index) in bloques" :key="index">

All right there, my problem is when I want to access contenidos try to use it:

<tr v-for="(bloque, index) in bloques.contenidos" :key="index">

then, how should one go after another so that the continuity of the array follows.

json vue.js

asked by DoubleM 11.12.2018 в 23:22

source

2 answers

Variable accessible from the whole app Multiplication hours x number

score 1 · Answer 1

Well I told you a solution proposal.

While for the first level values you do this:

{{ bloque.banner }}

And that results in you getting:

Banner_Doble_Megas_terminales2.jpg

For the next level within your data, you should do the following

{{ bloque.contenidos[0]["pdf"] }}

From the previous line of code we learned that:

bloque corresponds to the key that within the v-for helps me to iterate in the values
contenidos es la clave through which I want to reach their values
[0] I indicate that in the first level of the key contenidos remember that it is treated as a array where the first position is identified by being in the index 0
["pdf"] is the key that within contenidos that I'm trying to recover

Which will return the following in my HTML:

pymes.pdf

Clarification as all the data, both the first level and the of the second form part of the same key; then the structure of your declaration in the HTML through a v-for should be like this (a nested structure) that is, a secondary within a principal; where the secondary depends on the variable of the first

<div id="app">
    <ul>
      <li v-for="bloque in bloques">
         El id es: {{ bloque.id }}
         <p>el documento es: {{ bloque.contenidos[0]["pdf"] }}</p>
      </li>
    </ul>
  </div>

Finally the result of the complete code should be this:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div id="app">
        <ul>
          <li v-for="bloque in bloques">
             El id es: {{ bloque.id }}
             <p>el documento es: {{ bloque.contenidos[0]["pdf"] }}</p>
          </li>
        </ul>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      let app = new Vue({
        el: "#app",
        data:{
          bloques: [
        {
          "id": 1,
          "banner": "Banner_Doble_Megas_terminales2.jpg",
          "titulo": "Blindaje",
          "activo": 1,
          "contenidos": [
            {
              "id": 1,
              "subseccion": 0,
              "icon": "fa fa-copy",
              "nombre": "Guía Rápida",
              "pdf": "pymes.pdf",
              "imagenes": "",
              "bloque_id": 1,
              "ruta": null,
              "activo": 1
            }]
        }
    ]
        }
      })
    </script>
    </body>
    </html>

score 1 · Answer 2

The answer to your question is:

<tr v-for="(bloque, index) in bloques" :key="index">
  {{ index }}: {{ bloque.id }}
  ...
  ...
  <span>Contenidos:</span>
  <ul>
    <tr v-if="bloque.contenidos.length > 0" v-for="(val, i) in bloque.contenidos" :key="i">
    Contenido {{ i }}:
    <template v-for="(dato, nombre) in val" :key="nombre">
      {{ nombre }}: {{ dato }}
    </template>
    ...
  </ul>

That way you would print all your data.