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('', {
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=".2.4/jquery.min.js"></script>
<script type="text/javascript" src="shakes.js"></script>
</body>
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./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./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="shakes.js"></script>
</body>
5 Answers
Reset to default 5Adding 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./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
I would use this structure:
$(document).ready(function() {
$('#buttonClick').on('click', 'button', function() {
$.ajax({
type: "GET",
url: "http://ShakeItSpeare./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 ment:
$(document).ready(function() {
$('#buttonClick').click(function() {
$.ajax({
type: "GET",
url: "http://ShakeItSpeare./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);
}
});
});
});
It looks like you are missing the url key in the request
$(document).ready(function(){
$('#buttonClick').on('click', 'button',function(){
$.ajax({url:'http://ShakeItSpeare./api/sentence', //Add url: and move the {
success: function(response){
console.log(response)
$('.screen').html(response).fadeIn();
}
})
});
});
If the response that is ing 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.
Well.. you should get the String from the Object. It would be
$(document).ready(function(){
$('#buttonClick').on('click', 'button',function(){
$.ajax('http://ShakeItSpeare./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.
put a semi-colon after console.log(response)