CODEWITHSUNDEEP
javascriptphpjsonyii2
user18758393
user18758393

Reputation:

Pass and use data from json to javascript

I have a javascript function that I am calling in a php page. I also added a json method to this function that pulls data from the database. Here's what it looks like:

$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init('. Json::encode($restaurant->workHours) .')');

As a result, at the end of the page, I get this data in the form:

restaurantReserve.init([{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"}])

But I want to use this data in the javascript file itself, where the restaurantReserve function is located.

Because now I have to do it manually:

let json = [{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"}]

How can I make json data come to javascript so that I can use it? To not write it by hand.

update

One of the answers came up to me, it was to add this line, which will globally declare this variable:

$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');

But it turns out that this variable is declared after the execution of the script of this restaurant-reserve.js file where this variable is used, and I don’t understand a little how to make it higher.

Here is my final code in php file:

$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');
$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init()');

And what I get as a result on the page, first comes the file, then this variable:

<script src="/js/restaurant-detail.js"></script>
<script src="/js/share.js"></script>
<script>jQuery(function ($) { 
let json = [{"id"...}]
</script>

What can be done??

Upvotes: 3

Views: 184

Answers (2)

Shriram Jadhav
Shriram Jadhav

Reputation: 137

You may add following line in the code

$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';');

Updating the answer after reading your comments and further queries.

You may pass second one more parameters to registerJs function. View::POS_READY or View::POS_BEGIN

Like :

$this->registerJs('let json = '. Json::encode($restaurant->workHours) .';', View::POS_READY);

Upvotes: 1

user206
user206

Reputation: 1105

The second argument in registerJs is related to this issue.
That is, The second argument determines at which position the script should be inserted into the page. Possible values are:

View::POS_HEAD  for head section.
View::POS_BEGIN  for right after opening <body>.
View::POS_END  for right before closing </body>.
View::POS_READY  for executing code on the document ready event. This will automatically register jQuery and wrap the code into the appropriate jQuery code. This is the default position.
View::POS_LOAD  for executing code on the document load event. Same as the above, this will also register jQuery automatically.

The first argument is the actual JS code we want to insert into the page. It will be wrapped into a tag. The second argument determines at which position the script should be inserted into the page.

For scriptFiles you can also specify the place and time to load it. According to the dependencies and ....
It is better to refer to this link.

Upvotes: 1

Related Questions