getting all blade's details instead of just the response I want (defer component)

[Adel-Kazem]

What I want to do is to allow the user to insert a text into the input so this text be translated and then received back on the front end in order to display the translated text (similar to the Google Translate). But the issue that I'm facing is that when I return the response it displays the whole blade details and I only need the translated text I'm not sure how to access it

here's the blade code:
`

                        <x-splade-defer
                                url="http://127.0.0.1:8000/instantSubmit/"
                                request="{translate: form.textToTranslate}"
                                method="post"
                                watch-value="form.textToTranslate"
                                watch-debounce="100"
                                manual
                                @success="(response) => form.translatedText= response.translatedText"
                        >
                            <p v-show="processing">translating...</p>
                            <p v-if="response"  v-text="response.translatedText" />
                            <button @click.prevent="reload">Translate</button>
                            </x-splade-defer>
                    </x-splade-form>`

and for the controller's code:
$array = array("translatedText" => implode(" ", $translations)); $json = json_encode($array); return $json;

[Adel-Kazem]

I was doing it wrong, the right way to return the data is:

$array = array("translatedText" => implode(" ", $translations)); return response()->json($array);

and it's working fine.