How to get multiple GET API data response from Laravel with Axios? (VueJS)

Question

This is my Laravel PenilaianController:

public function index()
    {
        //
        $penilaian1 = PenilaianTahap1::join('peserta_t1', 'nilai_t1.nim', '=', 'peserta_t1.nim')
        ->join('pendaftar', 'peserta_t1.nim', '=', 'pendaftar.nim')
        ->join('sub_kriteria_t1', 'nilai_t1.id_sk1', '=', 'sub_kriteria_t1.id_sk1')
        ->join('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
        ->get([
            'nilai_t1.nim',
            'pendaftar.nama',
            'nilai_t1.nilai',
            'nilai_t1.id_sk1'
        ]);

        $subkriteria = SubKriteriaTahap1::join('kriteria_t1', 'sub_kriteria_t1.id_k1', '=', 'kriteria_t1.id_k1')
        ->get([
            'sub_kriteria_t1.sub_kriteria',
            'sub_kriteria_t1.bobot',
                    ]);
        $kriteria = KriteriaTahap1::all();
        $response = [
            'message' => 'Data pendaftar OR Sinema XI',
            'datanilai' => $penilaian1,
            'subkriteria' => $subkriteria,
            'kriteria' => $kriteria
        ];
        return response()->json($response, Response::HTTP_OK);
    }

And here the data results from PenilaianController via GET API:

{"message":"Data pendaftar",
"datanilai":[
{"nim":2810112045,"nama":"Annisa indra","nilai":0,"id_sk1":11},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":11},
{"nim":2810112045,"nama":"Annisa indra","nilai":0,"id_sk1":12},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":12},
{"nim":2810112045,"nama":"Annisa indra","nilai":5,"id_sk1":13},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":0,"id_sk1":13},
{"nim":2810112045,"nama":"Annisa indra","nilai":2,"id_sk1":21},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":5,"id_sk1":21},
{"nim":2810112045,"nama":"Annisa indra","nilai":7,"id_sk1":31},
{"nim":2810522035,"nama":"Muhammad fakhri naufal","nilai":7,"id_sk1":31}

],"subkriteria":[
{"sub_kriteria":"Tanggung Jawab","bobot":40},
{"sub_kriteria":"Keaktifan","bobot":30},
{"sub_kriteria":"Teamwork","bobot":30},
{"sub_kriteria":"Wawancara","bobot":1},
{"sub_kriteria":"Tes Bakat","bobot":1}

],"kriteria":[
{"id_k1":1,"kriteria":"Forum Group Discussion","bobot":33.3},
{"id_k1":2,"kriteria":"Wawancara","bobot":33.3},
{"id_k1":3,"kriteria":"Tes Bakat","bobot":33.3}
]}

Here's my VueJS "peniliaian" index.vue page coding:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="class col-12">
                <div class="card rounded shadow">
                    <div class="card-header">
                        Data Pendaftar
                    </div>
                    <div class="card-body">
                        <table class="table">
                          <thead>
                            <tr>
                              <th>NIM</th>
                              <th>Nama</th>
                              <th v-for="subkriteria in subkriteria" :key="subkriteria.id_sk1">
                                  {{ subkriteria.sub_kriteria }}</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="(penilaian1, index) in penilaian1.datanilai" :key="index">
                              <td>{{ penilaian1.nim }}</td>
                              <td>{{ penilaian1.nama }}</td>
                              <td>{{ penilaian1.gender }}</td>
                              <td>
                                <div class="btn-group">
                                  <router-link
                                  :to="{ name: 'penilaian1.show', params:{id: penilaian1.id}}"
                                  class="btn btn-sm btn-outline-info">Show</router-link>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {onMounted, ref} from 'vue'

export default {


    
    setup() {
        // reactivate state
        let penilaian1, subkriteria, kriteria = ref([])

        onMounted(() => {
            //get data from API endpoint
            axios.get('http://127.0.0.1:8000/api/penilaian1')
            .then((result) => {
                penilaian1.value = result.data.datanilai,
                subkriteria.value = result.data.subkriteria,
                kriteria.value = result.data.kriteria
            }).catch((err) => {
                console.log(err.response)
            });
        });
        return {
            penilaian1, subkriteria, kriteria
        }
    }

}
</script>

But VueJS creates error:

D:\Technolife\Coding\spk-or-as-client\src\views\penilaian1\index.vue:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'datanilai')

The question is, how I can properly call multiple API response via VueJS Axios like 'datanilai', 'subkriteria' and 'kriteria'? When I defined single response such 'data' (which is was previous name of 'datanilai'), it runs perfectly.

Answer 1

You are already assigning result.data.datanilai to penilaian1. See here:

axios.get('http://127.0.0.1:8000/api/penilaian1')
  .then((result) => {
    penilaian1.value = result.data.datanilai
    // ...
  });

You should be able to write the loop like this instead (removing the .datanilai):

<tr v-for="(penilaian, index) in penilaian1" :key="index">
  <td>{{ penilaian.nim }}</td>
  <td>{{ penilaian.nama }}</td>
  <td>{{ penilaian.gender }}</td>
  <td>
    <div class="btn-group">
      <router-link
        :to="{ name: 'penilaian.show', params:{id: penilaian.id}}"
        class="btn btn-sm btn-outline-info">Show</router-link>
    </div>
  </td>
</tr>

As an aside: Does v-for="subkriteria in subkriteria" really work? I would use a different variable name like v-for="sk in subkriteria":

<th v-for="sk in subkriteria" :key="subkriteria.id_sk1">
  {{ sk.sub_kriteria }}</th>