Jqueryを使用してJSONコンテンツを表示するには

Question

JSON.stringify()コンテンツをJSON形式で表示します。quoteクラスの文字とcharacterクラスの文字を引用したいと思います。ボタンをクリックすると、メッセージと見積もりが表示されます。

//HTML 

<div class="container-fluid"> 
    <div class = "row text-center"> 
    <h2>GOT Quotes</h2> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12 well quote"> 
     The message will go here 
     <br> 
     <div class = "col-xs-12 well character"> 
     Said By 
     </div> 
    </div> 
    </div> 
    <div class = "row text-center"> 
    <div class = "col-xs-12"> 
     <button id = "getMessage" class = "btn btn-primary"> 
     Get Message 
     </button> 
    </div> 
    </div> 
</div> 

//JS 

<script>$(document).ready(function() { 
    $('#getMessage').click(function() { 
     $.getJSON('https://got-quotes.herokuapp.com/quotes', function (json) { 
      $('.quote').html(JSON.stringify(json)); 
     }); 
    }); 
}); 

Answer 1

これは必要なものですか？ quoteクラスをdiv内のspanに移動したので、ネストされたcharacterdivを上書きしないようにしました。 .html()の代わりに.text()も使用しました。あなたがテキストを扱っているなら、これは正しいことです。

$(document).ready(function() { 
 
    $('#getMessage').click(function() { 
 
     $.getJSON('https://got-quotes.herokuapp.com/quotes', function (data) { 
 
      $('.quote').text(data.quote); 
 
      $('.character').text(data.character); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class = "row text-center"> 
 
    <h2>GOT Quotes</h2> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12 well"> 
 
     <span class="quote">The message will go here</span> 
 
     <br> 
 
     <div class = "col-xs-12 well character"> 
 
     Said By 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12"> 
 
     <button id = "getMessage" class = "btn btn-primary"> 
 
     Get Message 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>