Ajax Json parsed blank result - javascript

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.

Related

Write in a <p> api response

I'm trying to get a response from this api :
https://spen.tk/api/v1/isScamLink
The api response looks like this :
{"status":200,"result":true,"linkFound":""}
I want to get the result part into a var and use it in a paragraph in HTML.
This is my js code in the site :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$.ajax({
url: 'https://spen.tk/api/v1/isScamLink?link=' + document.getElementById("box").value,
type: 'GET',
dataType: 'json',
success: function(response) {
var result = response.data.total;
var final = $('#result').text(result);
}
})
})
</script>
It sais this error :
Uncaught TypeError: Cannot read properties of undefined (reading 'total')
Your data will be in response.result
$.ajax({
url: 'https://spen.tk/api/v1/isScamLink?link=https://google.com',
type: 'GET',
dataType: 'json',
success: function(response) {
console.log(response.result)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Your response json doesn't contain the key 'data', that's why you're getting error.

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>

Call JSON data from External file using Ajax

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>

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"

json_decode php returns null on valid json

I am trying to send a json object through ajax post in javascript as follows:
$.ajax({
type: 'POST',
url: 'testPost.php',
data: {json: cond},
dataType: 'json',
success: function(response) {
alert(response["json"]);
}
});
cond represents the json object which is something like this(converted with JSON.stringify):
[{"field":"name","condition":"<","value":"John"}]
on testPost.php file I have the following:
<?php
$return=$_POST["json"];
$decoded_json=json_decode($return);
$reply["json"]=$decoded_json;
print_r ( json_encode($reply));
?>
My problem is that Json_decode is returning null.
I have checked the encoding(UTF-8), and also checked that the json witch i send to the php file has no slashes or anything.
Can anyone help me?
header('Content-Type: application/json');
You need to add this line in PHP before echo.
Then
$.ajax({
type: 'POST',
url: 'testPost.php',
data: {json: cond},
dataType: 'json',
success: function(response) {
alert(response.field);
alert(response.condition);
alert(response.value);
}
});
Your Ajax data converted to
[{json : {"field":"name","condition":"<","value":"John"}}]
It's not valid because of json : side.
Convert your Jquery to
$.ajax({
type: 'POST',
url: 'testPost.php',
data: {"json": cond},
dataType: 'json',
success: function(response) {
alert(response["json"]);
}
});
And There is works example here,
<?php
if(count($_POST) > 0){
print_r($_POST);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
var cond = [{"field":"name","condition":"<","value":"John"}];
$.ajax({
type: 'POST',
url: 'a.php',
data: {"json" : cond},
dataType: 'text',
complete: function(response) {
$("body").html(response.responseText);
}
});
})
</script>
</head>
<body>
</body>
</html>
try using stripslashes() then json_decode()
$decoded_json = json_decode(stripslashes($return));

Categories