Call JSON data from External file using Ajax - javascript

I'm calling a external JS file having some sample JSON code, when I try to put sample json code in the file, it throws me error at ":", but when I validate that using online tools, it says as valid json. What is going wrong in this code?
Here is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.js",
method: "GET",
dataType: 'application/json',
contentType: "application/json",
success: function(result){
console.log(result);
},
error:function() {
alert("Error")
}
});
});
});
</script>
My external json.js
{
"data": [{ ------> throwing error at ":" as Syntax error on token ":", ; expected
"Service": "INSTACC",
"Create Date": "30-Jul-2016"
}, {
"Service": "INSTACC",
"Create Date": "30-Jul-2016"
}]
}

Change your file type to json and dataType to "json"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.json",
method: "GET",
dataType: 'json',
success: function(result){
console.log(result);
},
error:function() {
alert("Error")
}
});
});
});
</script>

"application/json" is not a valid value for the dataType property. Change it to dataType: 'json',
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyDemo</title>
</head>
<body>
<button id="click">Click Me</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.js",
method: "GET",
dataType: 'json',
contentType: "application/json",
success: function(result){
console.log(result);
},
error:function(req, status, err) {
console.log(req);
console.log(status);
console.log(err);
}
});
});
});
</script>
</body>
</html>

Related

Function(index, value not presenting data?

<html>
<head><title>Test</title></head>
<script src="jquery.js"></script>
<body>
<script type="text/javascript">
$.ajax({
url: 'https://www.alphavantage.co/query?function=SMA&symbol=MSFT&interval=weekly&time_period=10&series_type=open&apikey=_______',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
$(data.SMA).each(function(index, value){
console.log(value);
});
}
});
</script>
</body>
<html>
Data
I am trying to get the data to display the price, but when I feed the index, value it does not show the price displayed inside the data.
It does not show anything, what am I missing?
The SMS values are within this object Technical Analysis: SMA
console.log('Retrieving data...');
$.ajax({
url: 'https://www.alphavantage.co/query?function=SMA&symbol=MSFT&interval=weekly&time_period=10&series_type=open&apikey=G8M336NY2UCXEZL7',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
var target = data['Technical Analysis: SMA'];
$(Object.keys(target)).each(function(index, key) {
console.log(target[key].SMA);
});
console.log('Done!');
}
});
.as-console-wrapper {
max-height: 100% !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to get JSON data from Restful API URL?

I want to get Json data offered by 'http://localhost:8080/api/printer?exclude=temperature' [HTTP/1.1].
This is the Json data to be provided.
{
"state": {
"text": "Operational",
"flags": {
"operational": true,
"paused": false,
"printing": false,
"sdReady": true,
"error": false,
"ready": true,
"closedOrError": false
}
}
}
The type is 'GET' and Content-Type is 'application/json'
And below is my JSP whole source code.
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
function print_stat(){
jQuery.ajax({
type: 'GET',
async: false ,
url: 'http://localhost:8080/api/printer?exclude=temperature&apikey=1234567...',
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert("TEST");
},
error : function(x, e) {
alert('server error occoured');
if(x.status==0){ alert('0 error');
}else if(x.status==404){ alert('404 error');
}else if(x.status==500){ alert('500 error');
}else if(e=='parsererror'){ alert('Error.nParsing JSON Request failed.');
}else if(e=='timeout'){ alert('Time out.');
}else { alert(x.responseText); }
}
});
}
</script>
<body>
<input type="button" onclick="print_stat()" value="test">
</body>
I can't see "TEST" pop-up window.
And nothing happens.
What should I do for getting the data?
Please help me.
Can you try this,
Syntax:
$.ajax({
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Accept","application/json");
},
type: "POST",
url: uri,
data: jsonStrJson,
dataType: "json",
success: function(json){
console.log(json);
}
});
You code should be like this 100% working and tested code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
function print_stat(){
jQuery.ajax({
type: 'GET',
async: false ,
url: 'http://localhost:8080/api/printer?exclude=temperature&apikey=1234567...',
dataType: 'json',
success: function (data) {
alert("TEST");
console.log(data);
},
error : function(x, e) {
alert('server error occoured');
if(x.status==0){ alert('0 error');
}else if(x.status==404){ alert('404 error');
}else if(x.status==500){ alert('500 error');
}else if(e=='parsererror'){ alert('Error.nParsing JSON Request failed.');
}else if(e=='timeout'){ alert('Time out.');
}else { alert(x.responseText); }
}
});
}
</script>
<body>
<input type="button" onclick="print_stat()" value="test">
</body>
</body>
</html>

JavaScript jQuery AJAX POST data error

I am trying to send a post param. to request.php but it returns that the post param. are empty.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$.ajax({
url: "request.php",
type: "POST",
data: "{key:'123', action:'getorders'}",
contentType: "multipart/form-data",
complete: alert("complete"),
success: function(data) {
alert(data);
},
error: alert("error")
});
remove " " from this data as data:{key:'123', action:'getorders'}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$.ajax({
url:"request.php",
type:"POST",
data:{key:'123', action:'getorders'},
contentType:"multipart/form-data",
complete:alert("complete"),
success:function(data) {
alert(data);
},
error:alert("error")
});
</script>
You must use FormData for multipart/form-data ,and also need additional option in ajax ..
var request = new FormData();
request.append('key',123);
request.append('action','getorders');
$.ajax({
url: "request.php",
type: "POST",
data: request,
processData : false,
contentType: false,
success: function(data) {
alert(data);
}
});
This will help you. You don't want a string, you really want a JS map of key value pairs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$.ajax({
url:"request.php",
type:"POST",
data:{key:'123', action:'getorders'},
contentType:"multipart/form-data",
complete:alert("complete"),
success:function(data) {
alert(data);
},
error:function(){
alert("error");
});
</script>
This should work like a champ ,
construct object as below and stringify it as JSON.stringify(newObject) then there will be no chance of error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var newObject= new Object();
newObject.key= '123';
newObject.action='getorders'
$.ajax({
url:"request.php",
type:"POST",
data:JSON.stringify(newObject),
contentType:"multipart/form-data",
complete:alert("complete"),
success:function(data) {
alert(data);
},
error:function(){
alert("error");
});
</script>
Try this:
data: JSON.stringify({key: '123', action: 'getorders'}),
contentType: "application/json"

calling http url is working but Https is not working

I created self-signed certificate and bind with site for using https protocol and also its working fine in IIS but problem is that whenever I access contained webservice url(https://webservice/webmethod) into jquery ajax call for posting data and its cant work.
enter code here
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">
function btncallWebService() {
$.ajax({
//url is just for understanding
url: 'https://localhost/.../EditFormServices.asmx/WebSvcSave',
data: { sData:"bbbb" },
method: 'post',
dataType: 'xml',
success: function (respo) {
alert("success"+respo.d);
},
error: function (error) {
alert("error");
}
});
}
</script>
Here we go:
Your url is wrong
<script type="text/javascript">
function btncallWebService() {
$.ajax({
//url is just for understanding
url: '/WebSvcSave',
data: { sData:"bbbb" },
type: 'POST',
dataType: 'xml',
success: function (respo) {
alert("success"+respo.d);
},
error: function (error) {
alert("error");
}
});
}
</script>
Hope it helps;)

Ajax Json parsed blank result

I am trying to parse some JSON data through AJAX i followed an example from here:
how to parse json data with jquery / javascript?
On the example, they can get it working, but on my exmaple, the turned blank.
I tried just echoing the php, the JSON displayed with no problem either. Wondering what the problem is.
<!DOCTYPE HTML>
<html>
<head>
<link type ="text/css" rel="stylesheet" href= "css/bootstrap.css">
<link type ="text/css" rel="stylesheet" href= "css/account.css">
</head>
<body>
<p id="result">fefe</p>>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$.ajax({
type: 'GET',
url: 'get.php',
data: { get_param: 'value' },
dataType:'json',
success: function (data) {
var names = data
$('#result').html(data);
}
});
</script>
</body>
</html>
What the JSON result looks like in php:
[{"id":"1","userid":"26","title":"654","description":"654"}]
what is the type of data?
try add this line in your code on success function
success: function (data) {
console.log(data);
}
is it an array of objects, if yes maybe you can try this
$.ajax({
type: 'GET',
url: 'get.php',
data: { get_param: 'value' },
dataType:'json',
success: function (data) {
for(var i=0; i<data.length; i++) {
// do your things here using data[i].description until data[i].userid
}
}
});
Try this
$.ajax({
type: "GET",
dataType: "json",
url: "getjobs.php",
data: data,
success: function(data) {
$('#result').html(data);
}
});
Try setting $.ajax's datatype is set to jsonp. Also try to alert the return value.
$.ajax({
type: 'GET',
url: 'get.php',
data: { get_param: 'value' },
dataType:'jsonp',
success: function (data) {
alert('data is ::' +data);
$('#result').html(data);
}
});
Try this:
$.ajax({
type: 'GET',
url: 'get.php',
data: { get_param: 'value' },
dataType:'json',
success: function (data) {
console.log(data);
}
});
in the console(such as chrome browser`s development tools), you can see the actual result.

Categories