Using jQuery to get the data of a JSON Object

Question

I am new to jQuery and JSON. I have the following PHP code (getData.php) performs query from the database:

<?php
     header('Content-Type: application/json');
     ....
     // some code here
     ....
     $my_arr=array();
     // fectching data into array
     while($info = mysqli_fetch_array($result))
     {
       // convert to integer value if there is a bug after passing json_encode
       $rev=intval($info['bIRevNum']);
       $name=$info['bIName'];
       echo "<tr>";
       echo "<td>" . $info['bName'] . "</td>";
       echo "<td>" . $info['bRevNum'] . "</td>";
       echo "<td>" . $info['bIName'] . "</td>";
       echo "<td>" . $info['bIRevNum'] . "</td>";
       $my_arr[]=array('br'=>$name,'rev'=>$rev);
       echo "<td>" . $info['pName'] . "</td>";
       echo "<td>" . $info['pRevNum'] . "</td>";
       echo "</tr>";
     }

     // json encode
     echo json_encode($my_arr);
?>

After use echo 'json_encode' here I can see the JSON object under this format [{"br":"itemsb1","rev":37},{"br":"itemb2","rev":45}] on my page.

Now I want to access the integer of rev element of the object (37 and 45) for future usage by jQuery in a different PHP file, lets call it index.php and with the below script

<html>
.....
<script>
   $(document).ready(function(){
       $("button").click(function(){
           $.getJSON("getData.php", function(obj) {
             $.each(obj, function(key, value){
                    $("#div1").append("<li>"+value.rev+"</li>");
         });
       });
   });

    });
</script>   
...
// test here
<!---jquery--->
<div id="div1"><h2>CHANGE >>>> ....!!!!</h2></div>
<button>Calling from different PHP file</button>
</html>

If it is correct, when I click on the button "Calling from different PHP file" it should appears the value of JSON object as 37, 45.

I have tried many ways, but it does not display anything on my page.

Please help me with this!

Use the developer console to track the AJAX call. Are you echo'ing the HTML ("<td>" . $info['bName'] . "</td>" etc.) in addition to the JSON? — kero
– kero, Commented Dec 3, 2013 at 23:26
only the json string can be sent, you are sending html also, this won't validate and will cause parserror — charlietfl
– charlietfl, Commented Dec 3, 2013 at 23:28
@kingkero yes that just additional stuff that i want to display on the page. I thought it would not affect when I use jquery to get the value. I did comment out those echo'ing HTML, but its still not working — user3063604
– user3063604, Commented Dec 3, 2013 at 23:36
@charlietfl I just try to test the output that why i am using echo HTML to display the data, so when I comment out, it does not change anything — user3063604
– user3063604, Commented Dec 3, 2013 at 23:38

Yussuf S · Accepted Answer · 2013-12-03 23:58:21Z

1

It appears your problem is that you are echo'ing the html as well as the JSON. try removing the 'echo' from these lines

echo "<tr>";
echo "<td>" . $info['bName'] . "</td>";
echo "<td>" . $info['bRevNum'] . "</td>";
echo "<td>" . $info['bIName'] . "</td>";
echo "<td>" . $info['bIRevNum'] . "</td>";
echo "<td>" . $info['pName'] . "</td>";
echo "<td>" . $info['pRevNum'] . "</td>";
echo "</tr>";

DO NOT delete this line:

$my_arr[]=array('br'=>$name,'rev'=>$rev);

Also make sure your javascript is syntax correct

$("button").click(function(){
   $.getJSON("getData.php", function(obj) {
        $.each(obj, function(key, value) {
            $("#div1").append("<li>"+value.rev+"</li>");
        });
    });
});

edited Dec 3, 2013 at 23:58

answered Dec 3, 2013 at 23:30

Yussuf S

2,1421 gold badge14 silver badges12 bronze badges

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

2 Comments

user3063604 Over a year ago

the only thing appear on my page is the json object [{"br":"itemsb1","rev":37},{"br":"itemb2","rev":45}]

Shai Over a year ago

@user3063604 and what does your developer console say? It will either have a JS error, or a network error (check the Network tab of your browser's dev console to see exactly what the AJAX request returned)

Matthew Weir · Accepted Answer · 2013-12-04 00:31:31Z

0

Ensure that the only content coming back from getData.php is JSON-formatted; otherwise, it won't be parsed correctly. If you visit getData.php in your browser directly, you should only see JSON content, and nothing else (including errors, warnings, etc.). Your jQuery looks good; so the issue would have to be whatever content is coming back from the PHP script. I just whipped up a trivial test case using this PHP:

<?php
    header('Content-type: application/json');
    $my_arr[]=array('br'=>'something','rev'=>'2.0.5');
    echo json_encode($my_arr);
?>

Using the exact HTML you provided, that works just as expected.

answered Dec 4, 2013 at 0:31

Matthew Weir

13 bronze badges

1 Comment

user3063604 Over a year ago

cool ! I know what happen now, the content coming back from my PHP script is not correct because the use of AJAX to interact with my database when doing query.. Thanks a lot this really helpful

Collectives™ on Stack Overflow

Using jQuery to get the data of a JSON Object

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related