What is the right way to pass data from PHP application to JS?

Question

Let's say i want to open a PHP page and without another request, pass some JSON data directly to the browser, so it will be accessible to my Javascript functions.

I don't know the right way to do it, but what i do currently is something like this :

<textarea id="mydata" style:"display:none">[{code:1,name:'John'},{code:2,name:'Mary'},{code:3,name:'Paul'}]</textarea>

I put the data inside a invisible textarea and now the data inside 'mydata' textarea is accessible by JS doing something like this :

var myData = JSON.parse($('#mydata').val());

Although this works, somehow it does not seem to me the right way to do it... I know i could avoid to 'dirty' the html code by getting the data using Ajax after the page opens, but what i'm trying to do here is avoid more requests, so with only one request, everything will be accessible. Actually in my application i have about 5 textareas like these, so with only 1 request to the server i get all data needed.

Thanks

If you're outputting JSON to the HTML, why not output it inside of a <script> tag? Then instead of fetching a string from a form element, you'd just have the actual object as a variable in your JavaScript code. — David
– David, Commented Jul 6, 2017 at 16:52
Another approach could be to attach the values to data- attributes on appropriate nodes: <div class="entry" data-code="1" data-name="John">etc</div> It really depends on what you're doing with the data in your javascript. — Stephen P
– Stephen P, Commented Jul 6, 2017 at 16:55

David · Accepted Answer · 2017-07-06 16:55:25Z

2

From PHP's perspective, there is no difference between this:

<textarea id="mydata" style:"display:none">[{code:1,name:'John'},{code:2,name:'Mary'},{code:3,name:'Paul'}]</textarea>

and this:

var myData = [{code:1,name:'John'},{code:2,name:'Mary'},{code:3,name:'Paul'}];

Both of the above take the form of:

[a string][the serialized object][a string]

Whether you're surrounding the values with HTML or with JavaScript, that surrounding decoration is just raw output strings as far as PHP is concerned. So there's no need to add the extra step of outputting the JSON to a form element and then using JavaScript to get the form element's value as a string and parse it back to an object. You can just emit the object itself directly to JavaScript code.

answered Jul 6, 2017 at 16:55

David

221k42 gold badges245 silver badges337 bronze badges

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

2 Comments

delphirules Over a year ago

So the way i'm doing is not totally wrong, from a code point of view ?

David Over a year ago

@delphirules: Well, if your approach works, then it's not completely wrong. The concept itself is sound. It's just going through unnecessary extra steps. Think of everything PHP is emitting to the page as just strings. (Because in the end, that's all it is when it's sent to the browser.) It's just a matter of organizing those strings into efficient code. If one of those strings is JavaScript code, then putting it in the JavaScript simply makes more sense than putting it in the HTML and then parsing it with JavaScript.

Collectives™ on Stack Overflow

What is the right way to pass data from PHP application to JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related