JavaScript: Decode a PHP json_encode response

Question

For example, I am json_encoding my array and outputting it:

$key = $this->key;
                    $sql = "SELECT * FROM Requests";                   
                    $result = $this->db->query($sql);
                    $temp = array();
                    foreach($result as $r)
                    {
                        if($r['key'] == $key){
                        array_push($temp, array(
                            'song' => $r['song'],
                            'artist' => $r['artist'],
                            'by' => $r['by']
                        ));
                        }
                    }
                    $this->encoded = json_encode($temp);
                    echo $this->encoded;

Then, I am sending a GET request to it:

$.get('http://www.example.com/file.php')
                .done(function(data){
                    alert(data['artist']);
                });

However, this alerts:

undefined

Can anyone possibly help me? I've searched a lot and tried a lot but nothing seems to be working (like, JSON.Parse).

Edit: I tried adding the header('Content-Type: application/json'); but it leaves me with this error:

TypeError: data is null

Thanks in advance!

$.get('http://www.syncsapi.x10host.com/API/Public/', {
  start: 'example'
})
$.get('http://www.syncsapi.x10host.com/API/Public/', {
    display: '5'
  })
  .done(function(data) {
    console.log(data[0]);
  });
});

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

that is the exact output, but when i echo "test"; it works because data is set as "test" :/ just, when i echo the json_encoded or array, the data is undefined or null — Jaquarh
– Jaquarh, Commented Mar 17, 2016 at 1:08
No the output of your PHP script, as your webserver emits it. Not the output of your javascript. — Evert
– Evert, Commented Mar 17, 2016 at 1:09

Evert · Accepted Answer · 2016-03-17 01:19:47Z

4

So the problem with your script is that you are basically emitting something like this:

[
  {
    "song"   : "...",
    "artist" : "..."
  }
]

But your javascript code is expecting something like this:

{
  "song"   : "...",
  "artist" : "..."
}

If your intention was to only ever send back one song for that PHP service, you should modify your PHP service to remove the top-level array.

However, if you intend to send back more than 1 song, then the data you returned makes sense, but your javascript does not. To fix your javascript, you could simply change:

alert(data['artist']);

into:

alert(data[0].artist);

Note that .artist and ['artist'] is the same, the real difference in my sample is that I added [0] which grabs the first item in the top-level array.

answered Mar 17, 2016 at 1:19

Evert

101k18 gold badges136 silver badges221 bronze badges

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

11 Comments

Jaquarh Over a year ago

with the header mentioned below: error - TypeError: data is null without it: error - data[0] is undefined :/

Evert Over a year ago

@KyleE4K I'm thinking then there might still be something wrong with your php script. Is it possible at all to send the url so I can take a look?

Jaquarh Over a year ago

$.get('http://www.syncsapi.x10host.com/API/Public/', { display: '5' })                 .done(function(data){                                          console.log(data[0]);                     alert(data[0].artist);                 });

Evert Over a year ago

Awesome. Interestingly your PHP script emits nothing! Empty string.

Evert Over a year ago

Verify by just opening syncsapi.x10host.com/API/Public/?display=5 in a browser.

|

Collectives™ on Stack Overflow

JavaScript: Decode a PHP json_encode response

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related