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, May 22 '13 at 9:03
@DaGLiMiOuX I am new to this JSON, Could you please be a bit more specific. — harishannam, May 22 '13 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, May 22 '13 at 9:07
@DaGLiMiOuX Still no change. Check Fiddle : jsfiddle.net/dj8LR/2 Changed line 6 and 7 — harishannam, May 22 '13 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, May 22 '13 at 11:22

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

up vote 0 down vote

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 '13 at 9:03

community wiki

Denys Séguret

jsfiddle.net/dj8LR/1 added your code to the fiddle. It still doesnt display anything. – harishannam May 22 '13 at 9:07

add a comment |

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

up vote 0 down vote

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 '13 at 9:26

DaGLiMiOuX

601317

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 May 22 '13 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 May 22 '13 at 10:01

no change. Same 200 Error – harishannam May 22 '13 at 10:10

@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 May 22 '13 at 10:13

Its little complicated with JSON i suppose. planning to go with XML for my project. – harishannam May 22 '13 at 10:20

| show 1 more comment

asked	2 years ago
viewed	1508 times
active	2 years ago

current community

your communities

more stack exchange communities

Parsing JSON data in PHP file using Javascript

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged php json parsing or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

Parsing JSON data in PHP file using Javascript

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged php json parsing or ask your own question.

Related

Hot Network Questions