Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ahoi's avatar
Level 5

JSON in API Resource is quoted?

Hi everybody,

I my API Resource I am accessing $user->options, which is a JSON field:

        Schema::table('users', function (Blueprint $table) {
            $table->json('options');
        });
<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;
use Illuminate\Support\Facades\Gate;

class UserResource extends JsonResource
{
    
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id'      => $this->id,
            'options' => $this->options,
        
        ];
    }
}

Now my result (seen on my browser's network console) is this:

options: "{\"notify_on_mail\":true}"

How can I return this unquoted?

The problem: I can not access this in Vue.js:

undefined is not an object (evaluating '_vm.user.options.notify_on_mail')

Your help is highly appreciated :-)

0 likes
3 replies
jlrdw's avatar

It's valid Json, does it display correctly in an app, not browser's network console.

See https://jsonlint.com/ a reference @Cronix shared in another post.

It shows valid.

ahoi's avatar
Level 5

Hm, that's strange...

In my browser (app) the JSON user.options looks like this:

{"notify_on_mail":true}

But if I try to access user.options.notify_on_mail I am getting undefined. I also renamed notify_on_mail to notify, without success.

jlrdw's avatar

I can't think of anything else, hope someone can help.

Please or to participate in this conversation.