-2

I am trying to fetch data from php, store it as json and load it into my javascript code.

I stored my variable in php like this:

$data = array[];
$data = json_encode($raw_data);

Now I want to retrieve that data and use it in my javascript file. I tried to use the following code in my js file:

var data ="<?php echo $data ?>";

[screenshot]: https://i.stack.imgur.com/pDfsf.png

Dr Charms
  • 11
  • 2
  • 1
    Remove quotes: `var data = ;` Also `js` file is not processed by php, so your approach will not work with it. – u_mulder Jun 18 '20 at 12:30
  • 1
    for future reference when asking questions here, "didn't work" is not a helpful description of your problem. Instead please describe the expected behaviour of the code, and then the actual behaviour of the code. If you find yourself unable to describe the actual behaviour, then this usually indicates that you need to do some more debugging before posting your question. Fortunately in this case it's quite obvious what the problem is likely to be just from seeing the code, but in more complex cases it's usually necessary to have more information available. – ADyson Jun 18 '20 at 12:32
  • Thank you both for the feedback! – Dr Charms Jun 18 '20 at 12:59
  • could you help me with that approach? Using ajax – Dr Charms Jun 18 '20 at 13:00
  • I don't think you need AJAX? Not unless you'll need to request an updated version of the data from the server during the lifetime of the page? It looked from your example like you were just trying to hard-code it into the JS. I've written an answer below which would help with that. – ADyson Jun 18 '20 at 13:01

4 Answers4

1

You are declaring the string to the variable data by using quotes.

Please remove the quotes and that would behave as per your expectations.

So your code should be replaced by the below lines.

var data =<?php echo $data ?>;
mickmackusa
  • 43,625
  • 12
  • 83
  • 136
Minal Shah
  • 1,402
  • 1
  • 5
  • 13
  • If this is the correct answer then the first duplicate already gives this advice and this answer doesn't add any new value to Stack Overflow. – mickmackusa Jun 18 '20 at 13:17
1

If the data is only needed once on page load, you can use a script bloc inside the PHP code and then use a JS function to fetch it. But if data is being updated according to the user's interaction with the page, keep in mind that you can't send data from server side in PHP to the client side in JS without using AJAX.

I suggest you read about and use one of these 3 methods:

XHR fetch or axios

nurge
  • 99
  • 9
  • I didn't say he could use ONLY those 3. I said he could use one of them. I wouldn't detail all methods here obviously. No need to be mean. – nurge Jun 18 '20 at 12:41
  • Also, he's trying to use a PHP html tag inside a .js file. This will never work even if he removes the quotes. It's best if he understands first the difference between server side and client side and how to establish connection between them by reading about the above mentioned 3 methods. – nurge Jun 18 '20 at 12:45
  • 1
    @ADyson I just did. – nurge Jun 18 '20 at 13:00
0
var data = <?php echo $data ?>;

or

var data = JSON.parse("<?php echo $data ?>");
lindowx
  • 34
  • 5
  • 4
    Please only answer questions which should not be closed. Also, please never post code-only answers. Every answer should be explained with the intention of educating and empowering the OP and thousands of future researchers. – mickmackusa Jun 18 '20 at 13:10
0

The most obvious problem is your quote marks, which make the variable a string in JavaScript, rather than a complex object with a data structure. So any references to properties etc in the variable would not work. The quote marks should be removed so that the data is rendered as an object literal into the emitted JavaScript.

But there's another signficant issue: if this is being done in a .js file as you state, then the PHP interpreter is not running there, so the echo won't work (quotes or no quotes), because it isn't executed by PHP and turned into data. You'd just see the PHP code directly embedded in the JS code.

You'd have to echo the data into a script block in the .php file, then call the appropriate function in your .js file and pass the data as a parameter. This will work nicely if the data is only needed once.

e.g.

PHP file

<?php
$data = array[];
$data = json_encode($raw_data);
?>

<script src="someJsFile.js"></script>
<script>
var data = <?php echo $data ?>; //inject the data into the JS as an object literal
someFunc(data); //pass the data to a function in someJsFile.js
</script>

JS file:

function someFunc(data) {
  //your code to process the data
}

If you need to keep it updated during the lifetime of the page, then you'll need AJAX to be able to request new data from the server, as suggested in one of the other answers.

ADyson
  • 57,178
  • 14
  • 51
  • 63