jquery - Getting error named 'undefine' when i fetch json data from php page to index page

When I click on an image it opens popup and it will show zoom image but it is not working properly. It shows whole array but it cant display by index.

So how do I fix this problem?

popup.php

$id = $_REQUEST['id'];
$hidden_id =  $_POST['hidden_id']; 

$sel = "select * from uploaded_images where id='$id' ";
$exe = mysql_query($sel);
$fet = mysql_fetch_assoc($exe);
echo  json_encode($fet);
Copy code

this is my jquery code:

$(document).ready(function () {
    //open popup
    $(".anchor_img").click(function (e) {
        var targetPopup = $(this).attr('id');
        //$(".overlay_form").html("$id="+targetPopup);
        $("#hidden_id").attr('value',targetPopup);
        //$("#myform").submit();
        //var dataStr  =  $("#myform").serialize(); 
        //alert(targetPopup);
       $.ajax({
           type: "POST",
           url: "popup.php?id="+targetPopup,
           dataType : 'JSON',
           data: $('#myform').serialize(), // serializes the form's elements.
           success: function(data)
           {
              $(".overlay_form").fadeIn(1000);
                //$("#id").html(jsonStr.id);
                 console.log(data.id);

           }

       });
        e.preventDefault(); // avoid to execute the actual submit of the form.      
    });

    //close popup
    $(".close").click(function () {
        $(".overlay_form").fadeOut(500);
    });

});
Copy code