I need to access data.data[0].title
while printing
data.data[0]
I get all object data
but while printing
data.data[0].title
i can't access any data
// this is my ajax script
<script>
$.ajax({
url: 'http://127.0.0.1:8000/api/posts',
dataType: 'json',
type: 'GET',
success: function(data) {
$('#test').html( JSON.stringify( data.data[0].title ) );
}
})
</script>
<p id="test" ></p>
You probably don't need JSON.stringify(). #illusion is right! I guess your response Object structure is similar to:
{
"data": [{
"title": "This is the title"
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'https://extendsclass.com/api/json-storage/bin/ebbfccb', //replace this with your api URI
dataType: 'json',
type: 'GET',
success: function(data) {
$('#test').html(data.data[0].title);
}
})
</script>
<p id="test" ></p>
Related
I want to save/assign an AJAX success response to a global variable. The response is fetched into a <p> tag, but how can I assign this response into a global variable for further use?
var x;
$.ajax({
url: url,
data: {
sending data
},
dataType: 'json',
success: function(data) {
alert(data.d)
}
});
You can just assign the data.d to x in the success block. The final solution would be
var x;
$.ajax({
url: url,
data: {
sending data
},
dataType: 'json',
success: function(data) {
x = data.d;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const ajaxData = $.ajax({
url: "data.json",
global: false,
type: "POST",
dataType: "jsonData",
async:false,
success: function(msg){
return msg;
}
}).responseText;
console.log(JSON.parse(ajaxData));
</script>
I have this html code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="result" style="color:red"></div>
</div>
</body>
<script>
$(document).ready(function(){
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(res)
}
});
})
</script>
Whenever I try to see the result on my browser it just shows an empty blank page.
I just need to return the API result and show it on html.
Any ideas?
The AJAX callback makes res an object. When you using .html() the argument must be a string. If you want to see the object represented on the page, use JSON.stringify():
$.ajax({
url: "https://api.github.com/users/Microsoft",
type: 'GET',
dataType: 'json',
success: function(res) {
$('#result').html(JSON.stringify(res))
}
});
I need to get the name from JSON file what is wrong wit this code?
i would like to get the name value from each of the results and add them to the body.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script>
$.ajax({
type: "GET",
dataType: "json",
url: "https://wger.de/api/v2/exercise.json?category=8&language=2",
success: function(data){
$.each(data,function(index,object){
$("body").append("<div>"+object.name +"</div><br/>")
})
}
});
</script>
</head>
<body>
</body>
</html>
The only problem is that you are using the wrong object to iterate.
if you run this snippet you can see the returned object on the console.
$.ajax({
type: "GET",
dataType: "json",
url: "https://wger.de/api/v2/exercise.json?category=8&language=2",
success: function(data){
console.log(data)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
as you can see, you need to iterate over data.results, so this code should work:
$.ajax({
type: "GET",
dataType: "json",
url: "https://wger.de/api/v2/exercise.json?category=8&language=2",
success: function(data){
if(data.results){
$.each(data.results,function(index,object){
$("body").append("<div>"+object.name +"</div><br/>")
})
}
}
});
The data argument supplied to the success callback comes in as an Object with a results property that is an Array of Objects.
Rather than passing in the whole data object to $.each you should just give it the results array like so:
success: function(data){
$.each(data.results, function(index, object){
$("body").append("<div>"+object.name +"</div><br/>")
})
}
i want to post two items into server by using ajax in java-script; based on server-side document the post url is like this
http://example.com/h/{first-item}/{second-item}
this is my java-script code:
$('#add-order').on('click', function() {
var name = $('#name');
var drink = $('#drink');
var order = ?? // my question is this part what should i add
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: 'application/json',
success: function(data) {
console.log("Data added!", data);
}
});
});
and this is my HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="input-group">
<h4>Add a Coffee Order</h4>
<p>name: <input type="text" id="name"></p>
<p>name_space: <input type="text" id="drink"></p>
<button id="add-order">Add!</button>
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
i am a new in ajax, thanks for your help.
You have to set the contentType to application/json in your Ajax request.
i.e as following:
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: "application/json",
dataType: "json",
success: function(data) {
console.log("Data added!", data);
}
});
});
here is an example for creating and encoding a json object.
var myObj = {
"name": $('#name').val(),
"drink": $('#drink').val()
};
var order = JSON.stringify(myObj);
Hard to really understand the post here, but it seems to me you simply forgot to mark the ajax requests contentType as json. See example below.
$.ajax({
type: 'POST',
url: 'http://example.com/h/',
data: order,
contentType: 'application/json'
dataType: 'json',
success: function(data) {
console.log("Data added!", data);
}
});
<div>
<input type="radio" id="normal" name="radioOption" onchange="enableTxt(this)" />
</div>
<div>
<input type="radio" id="luxury" name="radioOption" checked="checked" onchange="enableTxt(this)"/>
</div>
<script>
function enableTxt(elem) {
var id = $(elem).attr("id");
$.ajax({
type: "POST",
url: "Home/index",
data : { radiovalue: id},
dataType: 'json',
});
}
</script>
By passing the value i tried to run a php query.But it didn't work.But i got the output in console.I need to get the output in select option.Can any one please help??
Your ajax post is not handling the return.
$.ajax({
type: "POST",
url: "Home/index",
data : { radiovalue: id},
dataType: 'json',
success: function(response){
console.log(response);//json object
}
});
Try to something like this.
var id = $(elem).attr("id");
$.ajax({
type: "POST",
url: "test.php",
data : { radiovalue: id},
dataType: 'json',
});
And add below code in your php file. It's display Value.
echo $_POST['radiovalue'];