0

{
"id": 196,
"requester_id": 2344,
"student_id": 2419,
"grade": "5to Grado",
"birth_certificate": null,
"conduct_letter": null,
"solvency_letter": null,
"studies_certificate": null,
"vaccination_card": null,
"vission_exam": null,
"ear_exam": null,
"physical_exam": null,
"familiar_interview": 490,
"admission_exam": 488,
"admission_exam_payment": null,
"admission_grades": "[{\"name\":\"Reading\",\"score\":\"2nd Grade\"},{\"name\":\"Math\",\"score\":\"4th Grade\"},{\"name\":\"Language Arts\",\"score\":\"2nd Grade\"},{\"name\":\"Español\",\"score\":\"5th Grade\"}]",
"completed": 1,
"comments": null,
"submited_at": "2022-01-27T19:26:25.000000Z",
"created_at": "2022-01-07T23:42:50.000000Z",
"updated_at": "2022-02-16T20:25:55.000000Z",
"student": {
    "id": 2419,
    "given_name": "Gloria Janina",
    "family_name": "Fuentes Calderon",
    "email": null,
    "rol": "Alumno",
    "spouse_id": null,
    "has_details": "Si",
    "is_activated": true,
    "first_time_tutorial": 0,
    "sync_providers_data": 1,
    "email_verified_at": null,
    "created_at": "2022-01-07T22:12:29.000000Z",
    "updated_at": "2022-01-07T22:12:29.000000Z",
    "student_details": {
        "id": 941,
        "user_id": 2419,
        "photo": "profile_pictures/UdLBEe4DmCWHEquS9KBhm9iDQUy5RZjUksKEpAOF.jpg",
        "gender": "Femenino",
        "date_of_birth": "2011-03-05",
        "id_number": "0510201100685",
        "nationalities": "{\"first_nationality\":\"Honduras\",\"second_nationality\":\"Honduras\"}",
        "admission": 1,
        "enrrollment": null,
        "created_at": "2022-01-07T22:12:29.000000Z",
        "updated_at": "2022-02-16T20:26:00.000000Z"
    },
    "parents": [
        {
            "id": 2347,
            "given_name": "Eden Alonso",
            "family_name": "Fuentes Ramos",
            "email": "Eden78fuentes@gmail.com",
            "rol": "Padre",
            "spouse_id": 2344,
            "has_details": "Si",
            "is_activated": true,
            "first_time_tutorial": 0,
            "sync_providers_data": 1,
            "email_verified_at": null,
            "created_at": "2021-09-27T23:33:43.000000Z",
            "updated_at": "2021-09-27T23:33:43.000000Z",
            "pivot": {
                "student_id": 2419,
                "user_id": 2347,
                "relationship": "Padre",
                "created_at": "2022-01-07T22:12:29.000000Z",
                "updated_at": "2022-01-07T22:12:29.000000Z"
            }
        },
        {
            "id": 2344,
            "given_name": "Rossibel Esperanza",
            "family_name": "Calderon Martinez",
            "email": "rossibel0510cal@gmail.com",
            "rol": "Padre",
            "spouse_id": 2347,
            "has_details": "Si",
            "is_activated": true,
            "first_time_tutorial": 0,
            "sync_providers_data": 1,
            "email_verified_at": "2021-09-22T17:25:41.000000Z",
            "created_at": "2021-09-22T17:22:18.000000Z",
            "updated_at": "2022-01-07T21:55:37.000000Z",
            "pivot": {
                "student_id": 2419,
                "user_id": 2344,
                "relationship": "Madre",
                "created_at": "2022-01-07T22:12:29.000000Z",
                "updated_at": "2022-01-07T22:12:29.000000Z"
            }
        }
    ]
}
}

<ol>
<li v-for="alumnos in products" :key="alumnos.id">
<p>
    Estudiante id: {{ alumnos.id }}
</p>
<p>
    Padre:
</p>
<ul>
    <li v-for="estudiante in alumnos.student" :key="estudiante">
    <p>
        {{estudiante.given_name}}
    </p>
    </li>
</ul>
</li>
</ol>

Estoy usando vue, intento recorrer el json y obtener valores del objeto student para pintarlos en una lista, pero recibo un error de ' Cannot read properties of null ', parece que no esta acciendo a las propiedades del objeto student, como puedo hacer para acceder a dichas propiedades Logro acceder a las propiedades del primer for pero no a las del segundo (que en teoria estoy recorriendo el objeto student)

5
  • muestra un poco de codigo, para ayudarte, de favor.
    – Edgar Gc
    el 15 mar. 2022 a las 21:43
  • Acabo de agregar el json que deseo recorrer. Y el codigo html con vue con el que intento recorrer el json. el 15 mar. 2022 a las 21:47
  • para que se entienda.. no estas recorriendo un json.. un json es una representacion en texto de un conjunto de datos. Donde recibis ese error? en la consola? te fijaste de imprimer el objeto completo y ver que tiene adentro?
    – gbianchi
    el 15 mar. 2022 a las 23:08
  • Hola, entiendo. Te hablo de recorrer ya que es un conjunto de objetos json lo que recibo (products), y los itero de esa manera. Ese es el único error en consola, puedo acceder a todas las propiedades del json, incluso al objeto completo student, pero no directamente a sus propiedades. el 16 mar. 2022 a las 0:07
  • Podrias colocar el contenido de tu <script></script> ?
    – Agustin G.
    el 18 mar. 2022 a las 19:46

1 respuesta 1

0

Desde mi punto de vista tienes un error de concepto, estas intentando usar un v-for para recorrer una estructura que no es una lista. Student, según el ejemplo que envías, es un objeto, y no puedes renderizarlo como una lista.

En todo caso lo mas correcto seria hacer lo siguiente:

<li v-for="alumno in products" :key="alumno.id">
    <p>
        {{alumno.student.given_name}}
    </p>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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