getting api data using getjson javascript - javascript

I'm trying to use this api, to show data in my webpage.
I want to fetch the data and display it on a html paragraph.... I am using getJSON, but I couldn't make it work.. I am using AJAX to make a request.
Sample of the json data
{
"status":true,
"data":{
"h1":0,
"h3":0,
"h6":0,
"h12":0,
"h24":0
}
}
getjson code
$.ajax({
type: "GET",
url: "https://api.nanopool.org/v1/eth/avghashrate/1",
dataType: "json",
success: function(data) {
var json = $.parseJSON(data);
$('#results').html( json.data.h1);
}
});
html code is
<div id="results"></div>

Just remove $.parseJSON(), because data is already an object.
$(function() {
$.ajax({
type: "GET",
url: "https://api.nanopool.org/v1/eth/avghashrate/1",
dataType: "json",
success: function(data) {
console.log(typeof data); // -- Object
var json = data;
$('#results').html(json.data.h1);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="results"></div>

Related

Call JSON inside AJAX success

I want to call a json data inside my AJAX success. I'm still new on manipulating json and AJAX. Can somebody help me on how to access my json data which is from another URL? And I want to compare the id to the JSON data. Here's my code so far:
function getCard(id){
$.ajax({
type: "GET",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# Is it possible to call another AJAX here?
}
});
}
This code will work for you
$.ajax({
url: "url",
method: "post",
data: "id=" + id,
success:function(data) {
// success goes here
$.ajax({
url: "url",
async:false,
method: "post",
data: "id=" + id,
success:function(json) {
JSON.parse(json);
// compare data and json here
},
error: function(){
// error code goes here
}
});
},
error: function(){
// error code goes here
}
});
yes Zuma you can call another Ajax inside Success function of Ajax call. Below is the example:
$.ajax({
type: "post",
url: url1,
data: data1,
success: function(data){
$.ajax({
type: "post",
url: url2,
data: data2,
success: function(data){
});
});
});
function getCard(id){
$.ajax({
type: "Get",
url: "发送请求的地址",
data: "id=" + id,
success: function(data){
#call JSON data here from another URL
# if success,you can call another AJAX.
# Is it possible to call another AJAX here?
# yes!
}
});
}

Get Element value from Ajax response

I'm new to Jquery and Ajax calls... This is my call:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "some url",
success: function(response){
console.log(response);
}
})
});
The console log show this response:
{"2014/08/08":[{},{"TEST":0}]}
How can I save the value of TEST to a variable?
Similar to var t = document.getElementById('test').value
using JSON.parse
$(document).ready(function () {
$.ajax({
type: "GET",
url: "some url",
success: function(response){
try{
json = JSON.parse(response);
test = null;
$.each(json,function(i,item){
test = item[1].TEST;
});
alert(test);//this is what you want
}catch(e){}
}
})
});
The response from the server is json, so the best way to handle it is to tell jQuery to expect a json answer and turn it into a regular javascript object. This is done by adding the dataType: 'json' to your $.ajax(...) call :
$.ajax({
type: "GET",
url: "some url",
dataType: "json",
success: function(response){
console.log(response);
}
})
You can alternatively use the shortcut $.getJSON(...) :
$.getJSON("some url", function(response){ console.log(response); });
Now that you have a regular javascript object, you can use what other answers suggest :
success: function(response) {
console.log(response["2014/08/08"][1].TEST);
// or
$.each(response, function(i, itm) {
console.log(itm[1].TEST);
};
}
"want to save the value of TEST to a variable" Try this:
var t = response["2014/08/08"][1].TEST;
Demo
try this,
$.each(response,function(i,value){
alert(value[1].Test);
});

How to call json object from AJAX?

Here is my script:
$.ajax({
type: "Get",
url: "Sample.js",
datatype: 'json',
data: JSON.stringify({ key:key }),
success: function (data) {
var sample = data.name;
$("#html").html(sample);
},
error: function () {
alert("Error");
}
});
This is my Sample.js file:
{ "name": "user" }
When I run this code I get a blank screen. This is my script using getJSON():
$.getJSON("Sample.js", function (data) {
var sample = data.name;
$("#html").html(sample);
})
This produces "user" perfectly. What is the problem with $.ajax code?
In the getJSON version your don't send any data. Could this be the reason why that works? To me it looks like this could be sth. on the server side that delivers an empty JSON object when you pass the key parameter.
As the jQuery documentation states:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
Try modifying the dataType param.
change your datatype to dataType. Its case sensitive. Refer http://api.jquery.com/jQuery.getJSON/
Remove JSON.Stringify and change Get to GET
$.ajax(
{ type: "GET",
url: "Sample.js",
dataType: "json",
data: {key:key },
success: function (data)
{ var sample = data.name; $("#html").html(sample); },
error: function () { alert("Error"); }}
);

Display loading while retrieving data using Ajax method

I am using ajax, sometimes it takes time to load all the data from my database therefore I need to find a way to display (Loading...) While the data is not yet complete. Below is my sample code, and I am looking for some event while the data is still in process.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$('#para').html(data);
}
});
It is very simple..
before you call the ajax start your loading image..& after the success hide the image
for eg :
$.fancybox.showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(data){
$.fancybox.hideLoading();
$('#para').html(data);
}
});
here
$.fancybox.showLoading()
is my function in which I have the property of displaying the loader,
This will be internally called whenever an ajax call is made.
$.ajaxStart(function() {
$("img#loading").show();
});
$.ajaxComplete(function() {
$("img#loading").hide();
});
HTML
<img src="../images/loading.gif" alt="wait" id="loading"/>
<div id="loading">LOADING...</div>
var loading = $("#loading");
loading.hide();
function doAjax() {
loading.show();
$.ajax({
url: "/js/beautifier.js",
success: function (data) {
loading.hide();
}
});
}
doAjax();
on jsfiddle

POST a JSON data on a Server URL using Javascript

I have prepared a JSON data and I need to post it on the server so that a service can be called. URL to the server is available and I am making an AJAX call for the same to
POST the data.
But I dont know where to place the JSON string that is generated.
My Code is as Follows:
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'xml',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}
I want to post JSON data to the server URL. any Parameters to be used?
Thanks,
Ankit.
You should pass the values with data parameter $.ajax() jquery doc link
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
contentType:"application/json; charset=utf-8",
dataType:"json"
data: JSONData
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}
You are missing the data parameter. Moreover you need to send json data so dataType parameter should be set to json. Below is an Example
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
data: localJSONData,
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'json',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}

Categories