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

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

$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.

Answer

Other responders missed the sneaky but still obvious bit, that what's coming back from the resource being polled in the PHP is probably already valid JSON, and re-encoding it is causing the browser to interpret it merely as a string. In this case, the javascript never had a chance.

Remove the json_encode() bit in the PHP and just echo what comes back, and see if that doesn't improve things.