How do I iterate over a JSON array using jQuery/AJAX call from PHP?

Possible Duplicate:
Loop through Json object

I have a PHP function, data.php, which fetches JSON data from an external server URL like such:

<?php
$url = "https://dev.externalserver.net/directory";
$content = file_get_contents($url);
echo json_encode($content);
?>

The JSON array retrieved looks like the following:

[ 
   { "name": "Not configured", 
     "mac_address": "1111c11c1111", 
     "online": "false", 
     "rate": "Not configured" },

   { "name": "Not configured", 
     "mac_address": "0000c00c0000", 
     "online": "false", 
     "rate": "Not configured" } 
]

I'm now trying to write an AJAX call to that PHP function, iterate through the JSON array, and display it in the browser in non-JSON formatting. My AJAX code looks like the following:

$.ajax({ url: 'data.php',
         type: 'POST',
         dataType: 'json',
         success: function(output) {            
            $.each(output, function() { 
                $.each(this, function(key, value){
                    alert(key + " --> " + value); 
                });
            });
                                   }
});

My issue is that code is currently displaying alert boxes that show the individual characters within the array like such: 0 --> [ , 0 --> , 0 --> { ... etc etc

Is there a problem with how I'm passing the data using json_encode(); and dataType: 'json' or does the issue resolve with how I'm iterating through the array?

Thanks.