1

View

Right now, when I do

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

I see this

enter image description here

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

&quot;{&quot;innerWidth&quot;:&quot;980&quot;,&quot;innerHeight&quot;:&quot;1708&quot;,&quot;devicePixelRatio&quot;:&quot;3&quot;,&quot;screen&quot;:{&quot;width&quot;:&quot;428&quot;,&quot;height&quot;:&quot;926&quot;}}&quot;

I got so many &quot;

code-8
  • 54,650
  • 106
  • 352
  • 604
  • 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 Feb 15 '22 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 Feb 15 '22 at 21:06
  • 1
    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 Feb 15 '22 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 Feb 15 '22 at 21:10
  • I can access any attribute like `$device->propertyName` I don't need to do another AJAX for that. – code-8 Feb 15 '22 at 21:11
  • What happens when you try `console.log(JSON.parse('$device->window'))`? Assuming that line is generated by PHP, it should stick the JSON string inside single quotes, resulting in a string that Javascript can use with `JSON.parse()`, e.g. `console.log('{"foo":"bar","baz":"bat"}')`. – kmoser Feb 15 '22 at 21:14
  • The device is the client side, why dont you get the info about the device from the js directly ? `var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;` – N69S Feb 15 '22 at 21:37
  • Does this answer your question? [Get the device width in javascript](https://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript) – N69S Feb 15 '22 at 21:39
  • Does this answer your question? [Laravel blade pass Javascript variable in php](https://stackoverflow.com/questions/38224886/laravel-blade-pass-javascript-variable-in-php) – Martin Zeitler Feb 15 '22 at 22:22

3 Answers3

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.

Aleksandar Đokić
  • 2,118
  • 17
  • 35
1

Inside a script tag, you could do:

const myData = {{ $device->window }};
console.log(myData.screen.height);
James
  • 20,957
  • 5
  • 26
  • 41
  • `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. – Martin Zeitler Feb 15 '22 at 22:19
  • its all explained here https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window – Aleksandar Đokić Feb 15 '22 at 23:34
0

The's a blade directive for that:

@php
    $json = [ 1, new DateTime, (object)[], 'a' ];
@endphp
<script>
    test = @json($json);
    console.log(test)
</script>
shaedrich
  • 5,457
  • 3
  • 26
  • 42