How can I access JSON passed from PHP Laravel it in JS?

Question

View

Right now, when I do

<pre>{{ $device->window }}</pre>

I see this

I want to access it in JS. Ex. device.screen.height, It's 926

I've tried

console.log(`{{ json_decode($device->window) }}`);
console.log(JSON.parse(`{{ json_decode($device->window) }}`));
console.log(JSON.parse(`{{ json_decode($device->window) }}`));
console.log(JSON.stringify(`{{ json_decode($device->window) }}`));
console.log(JSON.stringify(`{{ json_decode($device->window) }}`));
console.log(JSON.parse(`{{ json_encode($device->window) }}`));
console.log(JSON.parse(`{{ json_encode($device->window) }}`));
console.log(JSON.stringify(`{{ json_encode($device->window) }}`));
console.log(JSON.stringify(`{{ json_encode($device->window) }}`));

I kept getting

htmlspecialchars() expects parameter 1 to be string, object given

If I do :

console.log(JSON.parse(JSON.stringify({{ json_encode($device->window) }})));

I got

"{"innerWidth":"980","innerHeight":"1708","devicePixelRatio":"3","screen":{"width":"428","height":"926"}}"

I got so many "

Decode makes it useable for PHP, encode allows you to pass it to javascript as a string. Since it's already encoded, don't mess with it on the PHP side — aynber
– aynber, Commented Feb 15, 2022 at 21:03
PHP side, I passed it to JS (FE) as is. Let me try encoding then. If you know the right syntax please feel free to suggest. — code-8
– code-8, Commented Feb 15, 2022 at 21:06
I would suggest you not to do that. It is not a common nor good practice. Mixing languages usually end up bad. Better to get the data in another way like AJAX. But if you insists, you may do some good with json encode and decode — Skywarth
– Skywarth, Commented Feb 15, 2022 at 21:09
I am using Laravel blade, it's the details page of my device. In that I already have access to $device object base on id. — code-8
– code-8, Commented Feb 15, 2022 at 21:10
I can access any attribute like $device->propertyName I don't need to do another AJAX for that. — code-8
– code-8, Commented Feb 15, 2022 at 21:11

Aleksandar Đokić · Accepted Answer · 2022-02-15 21:11:11Z

1

You have to use different sintax for that :

{!! json_encode($device->window) !!}

But you should not access it like this. Its not good practice to mix languages.

answered Feb 15, 2022 at 21:11

Aleksandar Đokić

2,39921 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

code-8 Over a year ago

YOUR suggestion works perfectly on first try, may I know this support on all Laravel version ? Can you please attach a ref link, so I can read more about it.

code-8 Over a year ago

How do I access my height ? .screen.height not working.

Aleksandar Đokić Over a year ago

laravel.com/docs/9.x/blade#displaying-unescaped-data Enjoy ! @code8888

Aleksandar Đokić Over a year ago

please acept my answer if it worked for you so topic will be closed @code8888

Aleksandar Đokić Over a year ago

Here is answer for screen height : stackoverflow.com/questions/3437786/…

James · Accepted Answer · 2022-02-15 21:31:16Z

1

Inside a script tag, you could do:

const myData = {{ $device->window }};
console.log(myData.screen.height);

answered Feb 15, 2022 at 21:31

James

22.4k5 gold badges30 silver badges44 bronze badges

2 Comments

Martin Zeitler Over a year ago

let may suit $device->window better than const, as these are not constant values. PHP will deliver only the initial value anyway - therefore the whole question is kind of questionable.

Aleksandar Đokić Over a year ago

its all explained here stackoverflow.com/questions/3437786/…

shaedrich · Accepted Answer · 2022-02-16 09:43:43Z

1

The's a blade directive for that:

@php
    $json = [ 1, new DateTime, (object)[], 'a' ];
@endphp
<script>
    test = @json($json);
    console.log(test)
</script>

answered Feb 16, 2022 at 9:43

shaedrich

5,7633 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

How can I access JSON passed from PHP Laravel it in JS?

View

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

View

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related