Send array from php to js with fetch()

Question

enter image description here I have pscript.php file they have array $timeslots(). Array need a send to script.js used fetch(). How this do it? The files are in the same folder.

php:

$timeslots = array();
while ($cells = mysqli_fetch_assoc($result))
{
  array_push($timeslots, $cells['rectime']);
}

js:

async function getResponse() {
  let respons = fetch('pscript.php', {
    method: 'get',
    headers: { 'Content-Type': 'application/json' },
    //body: JSON.stringify($timeslots)
})
  let content = await respons.json();
  console.log(content);
};

getResponse();

I tried send it with this code on php file

<script><?php echo json_encode($timeslots); ?></script>

and with it

echo json_encode($timeslots);

but html show me it

jsscript.js:7

   Uncaught (in promise) TypeError: respons.json is not a function
at getResponse (jsscript.js:7:31)
at jsscript.js:11:1

score 0 · Accepted Answer · answered Mar 16 '23 at 10:34

0

you need to echo the $timeslots array from PHP in an appropriate format (e.g. echo json_encode($timeslots);) after your while loop finishes (so that there's some JSON content for the JS to receive), and
you forgot to await the fetch, e.g. let respons = await fetch('pscript.php', { - see examples in many places e.g. https://dmitripavlutin.com/javascript-fetch-async-await/#2-fetching-json

answered Mar 16 '23 at 10:34

ADyson

57,178
14
51
63

i try echo, but it same thing. I add await and html send me new err: jsscript.js:5 Uncaught (in promise) ReferenceError: $timeslots is not defined at getResponse (jsscript.js:5:26) at jsscript.js:11:1 getResponse @ jsscript.js:5 (анонимный) @ jsscript.js:11 – naffi Mar 16 '23 at 10:38
i think my err in body: JSON.stringify($timeslots) but idk what i should do – naffi Mar 16 '23 at 10:40
You don't need `body: JSON.stringify($timeslots)`..."body" is for _sending_ data to the server, not for receiving it. Clearly, `$timeslots` isn't a variable which exists in your browser/JS, it's a PHP variable on the server. You had commented that out in the code in your question, so I assumed you weren't using it. Look again at the examples in the link in my answer to see how to read the JSON data you receive from the server, and look at https://developer.mozilla.org/en-US/docs/Web/API/fetch to ensure you understand what all the options in the fetch() function are used for. – ADyson Mar 16 '23 at 10:44
i comment that, but now html say i have syntax error Uncaught (in promise) SyntaxError: Unexpected token '<', "
"... is not valid JSON – naffi Mar 16 '23 at 10:48
Presumably then your PHP script is either erroring (and showing a HTML-formatted error message), or returning more than just JSON alone. Check the raw response via the browser's Network tool – ADyson Mar 16 '23 at 11:06
let me show you the code again just in case php: $timeslots = array(); while ($cells = mysqli_fetch_assoc($result)) { array_push($timeslots, $cells['rectime']); } echo json_encode($timeslots); js: async function getResponse() { let respons = await fetch('pscript.php', { method: 'get', headers: { 'Content-Type': 'application/json' }, //body: JSON.stringify(data) }) let content = await respons.json(); console.log(content); }; getResponse(); – naffi Mar 16 '23 at 11:16
I also attached a screenshot of the latest errors to the question – naffi Mar 16 '23 at 11:18
Ok. Well if that's the entire script then you _should_ be fine, but like I said there might be some kind of error or extra output. Did you do what I said and check the raw response? – ADyson Mar 16 '23 at 11:24
P.S. You also really don't need `headers: { 'Content-Type': 'application/json' }` in your fetch, because you're not sending any data (especially not JSON data) – ADyson Mar 16 '23 at 11:25
I don't understand what you're talking about, Idk how to check the raw response. I looked somewhere that the request was executed, but the variable is not output to the console – naffi Mar 16 '23 at 12:35
everything is fine, I did it! thank you very much – naffi Mar 16 '23 at 12:46
It's in your browser's Developer Tools. Instead of Console, look at the Network tool while you are running your code, you'll see the fetch request to pscript.php appear there. Click on it, and you can then click on the "Response" tab within it to see what PHP returned – ADyson Mar 16 '23 at 12:46

Send array from php to js with fetch()

1 Answers1