我发现了一个问题，当显示数据在一个表单更新使用JavaScript这是错误代码

这是我在index中的代码

$('body').on('click', '#editData', function() {
    var petugas_id = $(this).data('id');
    $.get("{{ route('petugas.index') }}" + '/' + petugas_id + '/edit', function(data) {
        $('#modal-edit').modal('show');
        setTimeout(function() {
            $('#name').focus();
        }, 500);
        $('.modal-title').html("Ubah Data Petugas");
        $('#updateBtn').removeAttr('disabled');
        $('#updateBtn').html("Simpan");
        $('#edit_petugas_id').val(data.id);
        $('#edit_name').val(data.name);
        $('#edit_username').val(data.username);
        $('#edit_email').val(data.email);
        $('#edit_nip').val(data.petugasDetail.nip);
        $('#edit_nuptk').val(data.petugasDetail.nuptk);
        $('#edit_nik').val(data.petugasDetail.nik);
        $('#edit_jenis_kelamin').val(data.petugasDetail.jenis_kelamin);
        $('#edit_tempat_lahir').val(data.petugasDetail.tempat_lahir);
        $('#edit_tanggal_lahir').val(data.petugasDetail.tanggal_lahir);
        $('#edit_status').val(data.petugasDetail.status);
        $('#edit_alamat').val(data.petugasDetail.alamat);
        $('#edit_pendidikan_terakhir').val(data.petugasDetail.pendidikan_terakhir);
        $('#edit_no_handphone').val(data.userKontak.no_handphone);
        $('#edit_facebook').val(data.userKontak.facebook);
        $('#edit_instagram').val(data.userKontak.instagram);
        $('#edit_twitter').val(data.userKontak.twitter);
        $('#edit_foto').val(data.foto);
        $('#edit_role').val(data.roles[0].id);
    });
});

这是我在控制器中的代码

public function edit($id)
    {
        $petugas = User::with(['petugasDetail', 'userKontak', 'roles'])->findOrFail($id);
        return response()->json($petugas);
    }

这是我在模型中的代码

public function userKontak()
    {
        return $this->hasOne(UserKontak::class);
    }

public function petugasDetail()
    {
        return $this->hasOne(PetugasDetail::class);
    }

我尝试使用JavaScript显示数据库中几个表的数据