顯示JSON格式

Question

這是我第一次在這裏，我試圖顯示這個json文件https://eu.mc-api.net/v3/uuid/(there輸入）作爲我的頁面上的格式化結果，它只顯示格式化的UUID和名稱，但我掙扎着，因爲我不是很好JS等

像：

名稱：（有姓名）

UUID：（有充分UUID）

這是我到目前爲止有：

HTML代碼

<div id="section"> 
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow- -2dp"> 
    <!-- Simple Textfield --> 
<form action="#"> 
<div class="mdl-textfield mdl-js-textfield"> 
<input class="mdl-textfield__input" type="text" id="IGN"> 
<label class="mdl-textfield__label" for="IGN">Enter IGN</label> 

    <!-- Primary-colored flat button --> 

    <div id="id01"> </div> 

    <br> 


    <input type="button" class="mdl-button mdl-js-button mdl-button--primary" value="Show" onClick=" var jsonget = 'https://eu.mc-api.net/v3/uuid/' + document.getElementById('IGN').value; headrun();"> 

    </form> 

</section> 
</div> 

JS代碼

function headrun() { 
     $.getJSON('https://eu.mc-api.net/v3/uuid/' + document.getElementById('IGN').value, function(data) { 
     var items = []; 

     $.each(data, function(key, val) { 
     items.push("<li id='" + key + "'>" + val + "</li>"); 
     }); 

     $("<ul/>", { 
     "full_uuid": "my-new-list", 
     "name": "my-new-list", 
     html: items.join("") 
     }).appendTo("body"); 
    }); 

    } 

    document.getElementById('username').innerHTML = IGN; 

Answer 1

試試下面的代碼

<div id="section"> 
    <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow- -2dp"> 
    <!-- Simple Textfield --> 
    <form action="#"> 
     <div class="mdl-textfield mdl-js-textfield"> 
     <input class="mdl-textfield__input" type="text" id="IGN"> 
     <label class="mdl-textfield__label" for="IGN">Enter IGN</label> 

     <!-- Primary-colored flat button --> 

     <script> 

      function headrun() { 
      $.getJSON('https://eu.mc-api.net/v3/uuid/' + document.getElementById('IGN').value, function(data) { 
       $("#details ul").append('<li>Name: ' + data.name + '</li>').append('<li>UUID: ' + data.full_uuid + '</li>'); 
      }); 
      } 

     </script> 

     <div id="id01"> </div> 

     <br> 


     <input type="button" class="mdl-button mdl-js-button mdl-button--primary" value="Show" onClick="headrun();"> 

     <div id="details"> 
      <ul> 
      </ul> 
     </div> 
    </form> 

這是JSFiddle

Answer 2

你需要做這樣的事情：

$.getJSON('https://eu.mc-api.net/v3/uuid/' + $('#IGN').val(), function(data){ 
    var items = [];   
    Object.keys(data).forEach(function(key) { 
     items.push("<li id='" + key + "'>" + data[key] + "</li>"); 
    }); 
});