Need to get name data from JSON file - javascript

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

Related

Return resulting json from github API on html file

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

Ajax call to 500px api not working

I have an AJAX call made with jQuery to a 500px API:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function(){
$('#myButton').click(function() {
$.ajax({
url: "https://api.500px.com/v1/photos?feature=editors&page=2&consumer_key=<your-consumer-key>",
dataType: 'jsonp',
type: 'GET',
success: function(result){
alert("success");
for(x in result.data){
$('#myHtmlList').append('<li><img src="'+result.data[x].image_url+'"></li>');
}
},
error: function(result){
alert("Error: "+result);
console.log(result);
}
});
});
});
</script>
The result of this code is the "Error" alert. If I copy and paste the same url in browser it works and returns the json with the images. I don't understand why the javascript call doesn't work.
I also don't understand why if I make the same code call to an Instagram API, for example:
url: 'https://api.instagram.com/v1/users/' + userId + '/media/recent'
dataType: 'jsonp',
type: 'GET',
data: {access_token: <your-access-token>},
it works.

Parse JSON data in jQuery and display in textfield

I am going to print the response data from test.php in JSON format to print it on particular field
$.ajax({
type: 'POST',
url: 'test.php',
data: data,
success: function(response) {
var result = $.parseJSON(response);
$(document).ready(function(){
$("#test").click(function(){
$("#bemail").val(result.email);//when i prints only result than it displays [object object]
});
});
}
});
Try it like this . You have to put your ajax inside $(document).ready
$(document).ready(function(){
$.ajax({
type: 'POST',
url: 'test.php',
data: data,
success: function(response) {
var result = JSON.parse(response);
$("#bemail").val(result.email);
}
});
});
you are calling document.ready() inside the AJAX success handler which doesn't get invoked since AJAX call doesn't invoke the document loading again, DOM has already loaded and it loads only once in the life cycle of a page session.
This much should do
$.ajax({
type: 'POST',
url: 'test.php',
data: data,
success: function(response) {
var result = JSON.parse(response);
$("#bemail").val(result[0].email); //after you explained the JSON response
}
});
Your code is totally wrong, it should be
function displayEmail() {
$.ajax({
type: 'POST',
url: 'test.php',
data: data,
success: function(response) {
var result = $.parseJSON(response);
//Just Print the Result in Console using console.log(result)
$("#bemail").val(result.email);
}
});
}
$(document).ready(function() {
$("#test").click(function() {
displayEmail();
});
});

Send a Json object to server with javascript function

I try to send a json object to a distant server, but I didnt receive success message. please what's wrong with this code:
function sendSMS(){
var input = '{"header":"****","****":*****,"****":"*****"}';
var url = "https://**********&username=*****&password=*******";
jQuery.ajax({
type: "POST",
crossDomain:true,
url: url,
data: JSON.stringify(input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(){
alert("success");
}
});
}
// html code
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json.org/json2.js"></script>
<script type="text/javascript" src="sendSMS.js"></script>
</head>
<body>
<button onclick="sendSMS()">sendSMS</button>
</body>
</html>
Any help please.
You have to simple change your ajax call to this:
function sendSMS(){
var input = '{"header":"Ooredoo","msisdn":21620117297,"SMS":"Hello"}';
var url = "https://**********&username=*****&password=*******";
jQuery.ajax({
type: "POST",
crossDomain:true,
url: url,
data: JSON.parse(input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(){
alert("success");
}
});
}
The main changes are JSON.stringify to JSON.parse this will help you to parse the JSON data into a JSON object, and the second change is the actual payload in which you missed a " at the end, just after Hello.
If you have any other question, just ask :)
Also I would recommend not to send the username and password as querystring parameter, use a POST request with a proper payload and last, if you can go through ssl

how to ignore (tags,scripts) in an ajax call. for json use

I want to ignore tags like divs and scripts and just get the json texts.
my ajax call doesnt work if i have none json format texts. but i think it would be pointless if you have a page with pure json format only.
My ajax call
$.ajax({
url: "secpage.html",
type: "POST",
dataType: "json",
success: function(data) {
$("#load").html(data);
alert(data);
}
});
My page to be returned
<script></script>
{"msg" : "Hello"}
I want to igonre those script tags and just have the json text. plss help.
maybe something like this?
$.ajax({
url: "secpage.html",
type: "POST",
dataType: "json",
success: function(data) {
var newdata='';
data=data.split('\n');
for (var i in data) {
if (i.charAt(0)=='{'){
newdata+=i + '\n';
}
}
alert(newdata);
}
});

Categories

Resources