jquery return error msg from php server not showing in div

i have a simple code for js on my side and wanted to return the error msg from my php json server side if there is an error such like custom msg

php

<?php
header('Content-Type: text/html; charset=utf-8');
require_once('class/MysqliDb.php');
$db = new Mysqlidb();
$cols = array("card_id","card_os");

$cards = $db->get("cards",null,$cols);
if($db->count >0){
$cards['status'] = 'success';
} else {
$cards['status'] = 'fail';
$cards['error'] = 'fail to insert';
}
echo json_encode($cards);
?>

as for my js

 $(document).ready(function() {
 $.post('./get_cards.php',$(this).serialize(),function(msg){


 if(msg.status == 'success'){
 $('#cardlist').html(format(msg));                        
 }
 else if(msg.status == 'fail') {
  console.log(msg.error);
 $('#cardlist').html(msg.error);
 }
 },'json');

 } );

i am trying to have my #cardlist div to have this error msg 'fail to insert' from my server side. It is not showing the msg in the div but instead when is there is data is populating correctly.

via Chebli Mohamed