1

I have a PHP endpoint that returns a JSON-object (maybe that is not what this is?)

{"my_array":["a","b","c","d"]}

That's what you see when you view that page. It's created using 

$array = [];
$array['my_array'] = ["a","b","c","d"];
echo json_encode($array);

When I use a regular XHR call from MDN

// get XHR from MDN
function getAjax(url, success) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send();
    return xhr;
}

I can iterate over it using this post-call function:

getAjax('get-users.php', logOutput);

function logOutput(response) {
    console.log(JSON.parse(response));
    // returns: {"my_array":["a","b","c","d"]}
}

When I try to do this with fetch, it doesn't work.

fetch('get-users.php')
    .then((res) => {
        return res.json(); // also tried res.text();
    })
    .then((data) => {
        console.log(data);
    });

I'm not sure if the way I'm creating the output from PHP is wrong, or if my Fetch is wrong.

Here is an image of the code/console.log

Edit: I wanted to point out it's not a url/target problem, for the sake of site anonymity I whited out some parts of the link.

subalublub
  • 13
  • 5
  • 1
    Did you try `res.body` or anything like that? https://developer.mozilla.org/en-US/docs/Web/API/Response – Brian Kung Mar 16 '18 at 19:16
  • @BrianKung No I have not. I tried .json() and .text() that sounds like it will work then I would use regular JSON.parse() I think, let me check. Thanks – subalublub Mar 16 '18 at 19:17
  • 1
    Try add `header('Content-Type: application/json');` in your PHP – Guillermo Andres Fuentes Moral Mar 16 '18 at 19:18
  • @BrianKung I tried it I don't get an error but see readableStream this time. I'll try what Guillermo suggested with adding the header. So far not working. I'm thinking my data output isn't formatted right for Fetch or not reading it right. – subalublub Mar 16 '18 at 19:20
  • I think it is my endpoint data formatting/headers. I tried the code here form css-tricks (tried this from another site as well) but with a known endpoint and it works as expected. https://css-tricks.com/using-fetch/ – subalublub Mar 16 '18 at 19:30
  • I copy/pasted your code and could not reproduce the problem: https://i.imgur.com/dgYlJxM.png – Quentin Mar 16 '18 at 21:26
  • @Quentin what is in your get-users.php just echoing out that array/no headers? I was also told to check cors. I'm going to look at this again when I get the time/free from work. Thanks for your help – subalublub Mar 18 '18 at 18:06
  • @subalublub — ` – Quentin Mar 18 '18 at 18:11
  • @subalublub — CORS won't help. You have a relative URL. You are not making a cross-origin request. (If CORS would help then you would get a big error message in your browser's Developer Tools' Console). – Quentin Mar 18 '18 at 18:11
  • @Quentin yeah that's what I thought as well about CORs. I was also told to check the response in console. Anyway I'll take a closer look at it. Good to know that it works as expected. – subalublub Mar 18 '18 at 18:16

0 Answers0