Vuejs v-for multidimensional array json_object

Question

I try to loop through a multidimensional json_object using the vueJS v-for function.

But i get the following error:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'id' of null"

My code looks like this:

                    <tr v-for="timeblock in responseAPI">
                            <td>
                            {{timeblock.time}}
                            </td>
                            <td v-for="value in timeblock.appointment">
                            {{value.id}}
                            </td>
                            <td>
                            {{timeblock.break}}
                            </td>
                            <td>
                            {{timeblock.scheduled}}
                            </td>
                            <td>
                            {{timeblock.text}}
                            </td>
                        </tr>

And my json_object like this:

[
  {
    "time": "09:00",
    "break": null,
    "scheduled": "Stoel 1",
    "appointment": {
      "id": 1,
      "patient_id": 1,
      "chair_id": 1,
      "date": "2017-05-10",
      "time": "09:00:00",
      "duration": 30,
      "treatment_type": "Controle",
      "created_at": null,
      "updated_at": null
    },
    "text": null
  },
  {
    "time": "09:30",
    "break": null,
    "scheduled": "Stoel 1",
    "appointment": {
      "id": 2,
      "patient_id": 2,
      "chair_id": 1,
      "date": "2017-05-10",
      "time": "09:30:00",
      "duration": 30,
      "treatment_type": "Controle ",
      "created_at": null,
      "updated_at": null
    },
    "text": null
  } ]

Answer 1

When v-for object the value is the value of each key you dont need to access any prop since the value is not an key/value but value only

  <td v-for="value in timeblock.appointment">
         {{value}}
    </td>

Answer 2

Your timeblock.appointment is not an array but just a plain object. Try

<td>
  {{timeblock.appointment.id}}
</td>

Answer 3

Your code is almost correct, but you are not giving the second loop the index to read from: this is the error.

Just make it (timeblock, index) to read your index and in the second loop use your timeblock[index].appointment

<tr v-for="(timeblock,index) in responseAPI">
  <td>
    {{timeblock.time}}
  </td>
  <td v-for="value in timeblock[index].appointment">
    {{value.id}}
  </td>
  <td>
    {{timeblock.break}}
  </td>
  <td>
    {{timeblock.scheduled}}
  </td>
  <td>
    {{timeblock.text}}
  </td>
</tr>