Как правильно отобразить ответ JavaScript?

Question

Ниже мой код JavaScript для вызова сервера API:

<script type='text/javascript'> 
    call_juvlon_api(apikey, 'getAvailableCredits', '', function(response) { 
    document.getElementById('show').innerHTML=response; 
    }); 
</script> 

Когда я распечатать ответа в HTML-тег:

<h1 id='show'></h1> 

Я получаю результаты в этом формате:

{"code":"200","status":"Success:Mail Credit Details","Mail Credits":"46"} 

Но я хочу, чтобы результат был следующим:

<h1>code:200</h1> 
<h1>status:Success:Mail Credit Details</h1> 
<h1>Mail Credits:46</h1> 

Я попытался следующие, но не отображалось ничего:

var obj=['show'] 

var tbl=$("<table/>").attr("id","mytable"); 
$("#div1").append(tbl); 
for(var i=0;i<obj.length;i++) 
{ 
    var tr="<tr>"; 
    var td1="<td>"+obj[i]["code"]+"</td>"; 
    var td2="<td>"+obj[i]["status"]+"</td>"; 
    var td3="<td>"+obj[i]["color"]+"</td></tr>"; 

    $("#mytable").append(tr+td1+td2+td3); 
} 

Answer 1

Прежде всего, вы будете нуждаться в 3 элементов h1, поэтому изменить элемент «показать» в DIV, как это;

<div id='show'></div> 

Тогда в вашем коде javascript получите доступ к элементам ответа по их названию следующим образом;

<script type='text/javascript'> 
    call_juvlon_api(apikey, 'getAvailableCredits', '', function(response) { 
    var obj = JSON.parse(response); 
    for(var prop in obj) { 
     document.getElementById('show').innerHTML += '<h1>' + prop + ":" + obj[prop] + '</h1>'; 
    } 
});