Erro ao pegar dados ajax

Não estou conseguindo recuperar os dados de uma row pelo ajax.

Na página index tenho este código

 <h2> Example </h2>
 <h3>Output: </h3>
 <div id="output">this element will be accessed by jquery and this text will be replaced</div>

<script type="text/javascript">
$(function (){
 $.ajax({
 url: "api.php",
 data: "",
 dataType: "json",
 success: function(data){
 var id = data[0]; //get id
 var vuf = data[1]; //get name
 //--------------------------------------------------------------------------------------
 // 3) Update html content
 //--------------------------------------------------------------------------------------
 $('#output').html("<b>ID: </b>"+id+"<b> UF: </b>"+vuf); //Set output element html
 //recommend reading up on jquery selectors they are awesome [http://api.jquery.com/category/selectors/](http://api.jquery.com/category/selectors/)
 }
 });
});
</script>

Na página api.php está aparecendo normal. Quando a executo não tem erro. aparece ["1","SP"]

<?php
 require '../dadosdb.php';

 $result = mysqli_query($conn,"SELECT * FROM register"); //query
 $array = mysqli_fetch_row($result); //fetch result

 echo json_encode($array);
?>

Se eu troco, na index, o success por error, aparece undefined.

Como posso corrigir isso?