Untitled

My json array is echoing directly to the page for some reason

theUrl = 'myphpquerypage.php?id=somenumber'

 

$.getJSON(theUrl, function(data) {        

    var content = "";

    $.each(data, function(index, array) {

        content += "<div>" + array.filename + "</div>";

        $(content).appendTo('#myContentDivTag');

       

$pdo = new PDO($dsn, $username, $password);

    $rows = array();

if(isset($_GET['id'])) {

    $stmt = $pdo->prepare("call getimages(?)");

    $stmt->execute(array($_GET['id']));

    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

}

echo json_encode($rows);

       

[{"filename":"img4dc458200caa7.jpg"},{"filename":"img41b65171bd651.jpg"},    {"filename":"img41be6c0eae1a4.jpg"},{"filename":"img41e5d5eede9da.jpg"},    {"filename":"img41e5d64383039.jpg"},{"filename":"img422fb82b3768a.jpg"},    {"filename":"img422fc528cc8d1.jpg"}]

       

$.ajax("myphpquerypage.php",

{

    dataType: "json",

    type: "get" /*can also be post*/,

    data: {id: "somenumber"},

    success: function(data)

    {

        var content = "";

        for (var key in data)

        {

            content += "<div>" + data[key].filename + "</div>";

        }

 

        $("#test").append(content);

    }

});

       

before div

 

<div id="test">

</div>

 

after div