How to display JSON content using Jquery

Question

JSON.stringify() displays content in JSON format.I would like the quote in quote class and character in character class.So that on click of button i'll get message and quote displayed.

//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));
        });
    });
});

The json parameter is misnamed because it contains an object, not JSON. There is no reason to use JSON.stringify() to turn it back into JSON, just access the properties you need directly. For help with this you'll need to show a sample of the actual JSON structure. — nnnnnn
– nnnnnn, Commented Jul 17, 2016 at 6:02

user94559 · Accepted Answer · 2016-07-17 06:03:42Z

Is this what you want? Note that I moved the quote class down to a span within the div so you don't overwrite the nested character div. I also used .text() instead of .html(). This is the right thing to do if you're dealing with 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>

Collectives™ on Stack Overflow

How to display JSON content using Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related