Parsing JSON data in PHP file using Javascript

Question

I have seen some other posts in Stackoverflow which were related. Tried that code but it did not work out for me.

actually i have a database with 2 images of an actress in my MYSQL database. I am generating JSON data using PHP and it works fine.

Link for JSON data

I am trying to parse it with Javascript as shown in this fiddle

Direct Parsing Fiddle Link

var json = [{
    "id": "1",
    "url": "http:\/\/i.imgur.com\/J8yqh3y.jpg"
}, {
    "id": "2",
    "url": "http:\/\/i.imgur.com\/WNx9i2c.jpg"
}];
var nazriya = json;
$.each(nazriya, function (index, nazriya_nazim) {
    $('#url-list').append('<li>' +
        '<h4>' + nazriya_nazim.url + '</h4>' +
        '</li>');
});

and it works fine.

But if i try to parse it from my PHP file located in my domain. It does not display anything. It shows blank page.

FIDDLE Link : Parsing JSON data on PHP File

type: "POST",
dataType: 'json',
url: "http://chipap.com/apps/nazriya_nazim/test1.php",
success: function (data) {
    alert("1");
    //var obj = jQuery.parseJSON(idata);
    var json = JSON.parse(data);
    $.each(json, function (index, nazriya) {
        $('#url-list').append('<li>' +
            '<h4>' + nazriya.url + '</h4>' +
            '</li>');
    });
}

I did not write all these code on my own. Browsed Stack and found solutions. But stuck up at the last step (parsing from a PHP file located in my server).

As said by @DaGLiMiOuX tried it in a separate HTML document.

<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",
    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
    },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
              '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }
});

</script>
</head>
<body>
<ul id="url-list"></ul>
</body>

Now also it shows the same error.

Do not use JSON.parse. The data that you are gonna recieve into your success function (data) it will be an object already. — DaGLiMiOuX
– DaGLiMiOuX, Commented May 22, 2013 at 9:03
@DaGLiMiOuX I am new to this JSON, Could you please be a bit more specific. — harishannam
– harishannam, Commented May 22, 2013 at 9:04
Of course. You got var json = JSON.parse(data);. You must set it var json = data;, but you already have data, so this is not needed. Just call in your $.each(json, function (index, nazriya) your data variable like this $.each(data, function (index, nazriya) Try and report, please. This should work. — DaGLiMiOuX
– DaGLiMiOuX, Commented May 22, 2013 at 9:07
@DaGLiMiOuX Still no change. Check Fiddle : jsfiddle.net/dj8LR/2 Changed line 6 and 7 — harishannam
– harishannam, Commented May 22, 2013 at 9:14

channa ly · Accepted Answer · 2013-05-22 11:10:38Z

In your client side specified the jsonpcallback as below

$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",


    jsonpCallback: function(data){
        alert('generate a specified jsonp callback');
        return "jsonpCall";
    },  


    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
     },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
          '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }

});

In http://chipap.com/apps/nazriya_nazim/test1.php

<?php 
   $callback = $_GET["callback"]; // return  "jsonpCall" that was specified in    jsonpCallback ajax with jsonp

   $json = '[{"id":"1","url":"http:\/\/i.imgur.com\/J8yqh3y.jpg"},{"id":"2","url":"http:\/\/i.imgur.com\/WNx9i2c.jpg"}]' ;

   echo $callback.'('. $json.')' ;
 ?>

You can understand much better about jsonp at at http://en.wikipedia.org/wiki/JSONP

http://jsfiddle.net/channainfo/wn5bz/

am acutally not directly entering the JSON values. I am getting them from my MYSQL DB — harishannam
– harishannam, Commented May 22, 2013 at 11:22

Denys Séguret · Accepted Answer · 2013-05-22 09:03:37Z

0

1) that's just an extract of a code, not a compiling function. The complete code would be

$.ajax({
  type: "POST",
  dataType: 'json',
  url: "http://chipap.com/apps/nazriya_nazim/test1.php",
  success: function (obj) {
    alert("1");
    $.each(obj, function (index, nazriya) {
        $('#url-list').append('<li>' +
            '<h4>' + nazriya.url + '</h4>' +
            '</li>');
    });
   }
});

2) you need to import jQuery (you don't do it in the fiddle)

answered May 22, 2013 at 9:03

community wiki

Denys Séguret

jsfiddle.net/dj8LR/1 added your code to the fiddle. It still doesnt display anything.

harishannam
– harishannam

05/22/2013 09:07:24
Commented May 22, 2013 at 9:07

Add a comment |

DaGLiMiOuX · Accepted Answer · 2013-05-22 09:26:31Z

0

XMLHttpRequest cannot load http://chipap.com/apps/nazriya_nazim/test1.php. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

You have to handle ALWAYS posible errors.

Check this demo.

This should work, but you got Access-Control-Allow-Origin error. This is caused because your dataType was incorrect. Try this configuration for your ajax call:

$.ajax({
    type: "POST",
    dataType: 'jsonp',
    url: "http://chipap.com/apps/nazriya_nazim/test1.php",
    success: function (data) {
        alert("1");
        var json = data;
        $.each(data, function (index, nazriya) {
            $('#url-list').append('<li>' +
                '<h4>' + nazriya.url + '</h4>' +
                '</li>');
        });
    },
    error: function(jqXHR, status, errorText) {
        alert('Status code: ' + jqXHR.status +
              '\nStatus text: ' + status + '\nError thrown: ' + errorText);
    }
});

NOTE: You get in the demo an alert as if it were an error, but your status code is 200 (check status codes). Try it in your project. Maybe JsFiddle it's not allowing to return data from external servers.

answered May 22, 2013 at 9:26

DaGLiMiOuX

8899 silver badges29 bronze badges

I did try the same in an html document for my project. It does not show error. As well as it shows a blank page.

harishannam
– harishannam

05/22/2013 09:54:00
Commented May 22, 2013 at 9:54
@harishannam Instead to add $('#url-list')... in your success function, add alert(data.url) and report if it shows something or not

DaGLiMiOuX
– DaGLiMiOuX

05/22/2013 10:01:40
Commented May 22, 2013 at 10:01
@harishannam I linked you a reference to Wikipedia about status codes. 200 is not an error code, it's a succesful code (OK). It means that your request was successful and it should return your data into your success function. Did you set into your php file json_encode($data) or whatever data/variable you want to return? Also, I've noticed that you are returning an object array. My last comment was not correct, use: alert(JSON.parse(data)[0].url); or alert(data[0].url); I'm not sure right now who is correct. You should specify things like that.

DaGLiMiOuX
– DaGLiMiOuX

05/22/2013 10:13:09
Commented May 22, 2013 at 10:13
Its little complicated with JSON i suppose. planning to go with XML for my project.

harishannam
– harishannam

05/22/2013 10:20:20
Commented May 22, 2013 at 10:20
@harishannam JSON it's easy, but you need to know how to work with it before you try to do something. Sorry, I tried to do my best. Hope you will find a solution even in JSON or XML.

DaGLiMiOuX
– DaGLiMiOuX

05/22/2013 10:23:07
Commented May 22, 2013 at 10:23

Add a comment |

Collectives™ on Stack Overflow

Parsing JSON data in PHP file using Javascript

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related