CODEWITHSUNDEEP
javascriptjqueryajax
javascript2016
javascript2016

Reputation: 1013

Ajax request url and display response in a div is not working?

I am trying to make a ajax request to a website and display only part of it. My code doesn't work and I can't see the reason. Also, how can I parse the object and display only parts of it (just one property)? Thanks a lot!

JS:

  $(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
      console.log(response)
   //console.log of response works 
        $('.screen').html(response).fadeIn();
      }
    })
  });
});

HTML

<body>
    <div id="buttonClick">
<button>click Me</button>
<ul class="screen"></ul>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="shakes.js"></script>
</body>

Upvotes: 1

Views: 4011

Answers (5)

Steve G
Steve G

Reputation: 13357

Adding the JSON property name you're trying to insert into the HTML should only insert that value. For example, in your code below, I added the "sentence" property in "response.sentence".

$(document).ready(function(){
  $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
        console.log(response)
        //changed original code from ".html(response)" to ".html(response.sentence)"
        $('.screen').html(response.sentence).fadeIn();
      }
    })
  });
});

Working code pen: Working Codepen

Upvotes: 5

Wesley Smith
Wesley Smith

Reputation: 19571

I would use this structure:

 $(document).ready(function() {
            $('#buttonClick').on('click', 'button', function() {
                $.ajax({
                    type: "GET",
                    url: "http://ShakeItSpeare.com/api/sentence",
                    success: function(response) {

                        console.log(response);
                        console.log(response.sentence);
                        console.log(response.markov);
                        //console.log of response works

                        $('.screen').html(JSON.stringify(response)).fadeIn();
                        //$('.screen').html(response.sentence).fadeIn();

                    },
                    error: function(xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        console.log(err.Message);
                    }
                });
            });
        });

Alternate method based on your comment:

   $(document).ready(function() {
        $('#buttonClick').click(function() {
            $.ajax({
                type: "GET",
                url: "http://ShakeItSpeare.com/api/sentence",
                dataType:'text',  // specify dataType as text and you wont need to convert the JSON 
                success: function(response) {
                    //console.log of response works
                    $('.screen').html(response).fadeIn();

                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        });
    });

Upvotes: 1

Osama Khalid
Osama Khalid

Reputation: 337

put a semi-colon after console.log(response)

Upvotes: -1

Slatyoo
Slatyoo

Reputation: 126

Well.. you should get the String from the Object. It would be 

 $(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
      console.log(response)
   //console.log of response works 
        $('.screen').html(response["sentence"]); // Changed this one from "response" to "response["sentence"]
      }
    })
  });
});


Object {sentence: "Nor goodly ilion stand.", markov: 2}

Or stringify it.

Upvotes: 0

BHinkson
BHinkson

Reputation: 334

It looks like you are missing the url key in the request

$(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){

    $.ajax({url:'http://ShakeItSpeare.com/api/sentence', //Add url: and move the {

     success: function(response){
      console.log(response)
        $('.screen').html(response).fadeIn();
      }
    })
  });
});

If the response that is coming back has a content-type of application/json then you won't need to do JSON.parse() If it is in json format but is a string then you can JSON.parse() it then use the data as an object.

If you do console.log(response) It should display the whole object back.

Upvotes: 0

Related Questions