Cannot read property of undefined error Javascript - javascript

Getting an error when trying to retrieve the amount of people someone is followed_by on Instagram.
The API is getting called properly but in line 10 I am getting an error "Uncaught TypeError: Cannot read property 'followed_by' of undefined".
Code is below.
function hello() {
var $url = 'https://api.instagram.com/v1/users/7624/?access_token={access-token}&count=100';
var $access_token = "257177111.ca91fd6.d912fbc4875d4d81abe28ee7b436d8da";
$.ajax({
method: "GET",
url: $url,
dataType: "jsonp",
jsonp : "callback",
success: function(data) {
alert(data.counts.followed_by);
},
error: function(data, error) {
alert("bad");
}
});
}

Change this:
alert(data.counts.followed_by);
to
alert(data);
alert(data.counts);
alert(data.counts.followed_by);
The first one that comes up as undefined is the one that doesn't exist & then fix your problem from there.
If is a whole lot easier to use console.log() to find these sorts of problems because you can just do console.log(data) & it gives you the whole object which you can inspect using any of the available dev tools used for that.

Related

AJAX getting error when more than a JSON is downloaded from webpage

I have an AJAX function that gets an error whenever it gets a JSON response from my other webpage that has an error printed at the end of the JSON response. When there is no error, the function reports normally, but I don't know how to get the AJAX function to ignore the error and just read the JSON part of the response.
HTML:
$.ajax({
url: 'https://example.com/quickstart_data.php',
type: 'POST',
dataType: 'json',
cache: false,
success: function(result) {
$("#timeToLeave").html(result['alarm']['timeToLeave']),
$("#timeToLeave").css({'color':result['background']['text']});
}
But the website responds something like this:
{"background":{"fill":"#202124","text":"White"},"event":{"unixTime":1607040000,"date":"4-12-20","day":"Fri","time":"10:30","dayFinish":"Fri","timeFinish":"11:30"}
Fatal error: Uncaught RuntimeException: Unable to find a speaker for this alarm in /var/www/html/vendor/duncan3dc/sonos/src/Alarm.php:128 Stack trace: #0 /var/www/html/vendor/duncan3dc/sonos/src/Alarm.php(74): duncan3dc\Sonos\Alarm->getSpeaker() #1 /var/www/html/vendor/duncan3dc/sonos/src/Alarm.php(660): duncan3dc\Sonos\Alarm->soap('AlarmClock', 'UpdateAlarm', Array) #2 /var/www/html/vendor/duncan3dc/sonos/src/Alarm.php(167): duncan3dc\Sonos\Alarm->save() #3 /var/www/GoogleAlarm/sonoscontroller.php(47): duncan3dc\Sonos\Alarm->setTime(Object(duncan3dc\Sonos\Utils\Time)) #4 /var/www/GoogleAlarm/quickstart_data.php(362): sonosAlarmUpdate('14', '08:54', false, '10') #5 {main} thrown in /var/www/html/vendor/duncan3dc/sonos/src/Alarm.php on line 128
**note I have removed irrelevant data in the JSON return because it is irrelevant to the problem
The "Fatal error:" part is not normally there unless there is a different error, however I still want the AJAX get JSON response to work. How do I do this? I do not want to turn it off in PHP.ini
If you really want to keep the error in the result parameter of success() but ignore it, do this before accessing the values of result :
let fatalErrorIndex = result.indexOf("Fatal error:");
if(fatalErrorIndex != -1) result = result.substring(0, fatalErrorIndex);
result = JSON.parse(result.trim());
Also, set the dataType to 'text' as you are manually parsing the JSON this way.
However, you should consider implementing ajax error handling. This way if anything wrong happens on the PHP side you'll be notified by the AJAX error callback:
$.ajax({
url: 'https://example.com/quickstart_data.php',
type: 'POST',
dataType: 'json',
cache: false,
success: function(result) {
},
error: function (xhr, ajaxOptions, thrownError) {
// Handle errors here
}
}
This is the correct way to handle errors. See the documentation for more info

Uncaught Syntax Error Unexpected token : , but the server received a valid json object from the server

I am trying to do a GET request to solr search engine using $.ajax() from jQuery. This is the code I am using for doing an ajax call:
$.ajax({
url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json',
type: "GET",
dataType: "jsonp",
jsonp : "callback",
success: function(data) {
console.log("Success", data);
},
error: function(data) { alert("Error"); }
});
So I am getting a valid json object in the response but somehow the browser throws an Uncaught Syntax Error. The actual error is:
Uncaught SyntaxError: Unexpected token :
select?indent=on&q=myparam:value&wt=json&callback=…....somevalue...
The tricky part is that the response header is text/plain when I checked in the browser. How can I solve this? Please help me...
Colons require encoding in query strings.
Your url should look like this:
http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam%3Avalue&wt=json
If you're generating the query string dynamically, use encodeURIComponent() to correctly encode special characters.
I got this solved. Actually I had to use jsonpCallback:"mysuccesscallbackfunction" in the ajax call and json.wrf=mysuccesscallbackfunction in the URL. It looks like this now:
$.ajax({
url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json&json.wrf=mysuccesscallbackfunction',
type: "GET",
dataType: "jsonp",
jsonp : "callback",
jsonpCallback:"mysuccesscallbackfunction",
success: function(data) {
console.log("Success", data);
},
error: function(data) { alert("Error"); }
});
and my mysuccesscallbackfunction is:
function mysuccesscallbackfunction(resp) {
console.log('inside mysuccesscallbackfunction: ', resp );
}
Now, first it executes whatever is inside mysuccesscallbackfunction and then goes to default success callback. I found it somewhere on web. I would still like to know why it worked now.

Reading JSON data with jquery. Uncaught SyntaxError: Unexpected token :

I'm trying to read JSON data using jquery. Specifically I'm trying to read the JSON from this url: http://mkweb.bcgsc.ca/color-summarizer/?url=http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg&precision=low&num_clusters=3&json=1&callback=?
However I keep getting this error:
Uncaught SyntaxError: Unexpected token :
Here is my jquery:
$(document).ready(function () {
var one = "1"
$.getJSON('http://mkweb.bcgsc.ca/color-summarizer/?url=http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg&precision=low&num_clusters=3&json=1&callback=?', function(result) {
document.write(result.clusters.one.rgb[0]);
});
});
I'm getting the error at the very first colon in the JSON code.
From what I understand, the JSON data is actually being read as Javascript. How can I fix this.
Reading the API Docs I found that you need to specify a jsnop=1 parameter in order to retrieve data via JSONP.
Tthe correct code would be something like this:
$(document).ready(function () {
$.ajax({
url: 'http://mkweb.bcgsc.ca/color-summarizer/',
type: 'GET',
dataType: 'jsonp',
jsonpCallback: 'colorsummary',
data:{
url: 'http://scontent-a.cdninstagram.com/hphotos-xfa1/t51.2885-15/10643840_701797013239098_657737630_a.jpg',
precision: 'low',
num_clusters: '3',
jsonp: '1'
},
success: function(result){
document.write(result.clusters['1'].rgb[0]);
}
});
});
I also structured the request so you can change parameters easily.
PS: watch out with that JSON notation ( the ['1'] in clusters and so)

jQuery ajax TypeError: illegal invocation

I'm working on an Ajax project. Everything on my page works, including this section:
var data = {
doc: "sample",
action: "updatemsg",
dbid: 97,
message: "text"
};
$.ajax({
url: ANNOTATION_ENDPOINT,
data: data,
success: console.log,
error: console.log
});
However, on every request, it throws this error:
Uncaught TypeError: Illegal invocation jquery.js:974
fire jquery.js:974
self.fireWith jquery.js:1084
done jquery.js:7803
callback jquery.js:8518
and the console.log calls are never made. ANNOTATION_ENDPOINT is a valid URL; my other functions use it with no problem.
I've broken down the problem to this small section but I'm baffled here. Any insight?
the log function expects its context to be the console object not an jqXHR so try
$.ajax({
url: ANNOTATION_ENDPOINT,
data: data,
success: console.log.bind(console),
error: console.log.bind(console)
});

Unable to retrieve particular JSON objects using jQuery

I try to retrieve a JSON object with jQuery from a server. Some properties of this object are arrays. When these arrays are not empty, I'm able to process my object. But when I retrieve a JSON like this one :
{"Id":144,"Identifier":"4000011","ContractId":115,"ContractName":"Test4","Meters":[],"Scans":[]}
where "Meters" and "Scans" are empty, jQuery raises an error... I query my server with this code :
$("#test").click(function () {
$.ajax({
type: "GET",
url: "/Gateway/GetDetails/144",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, textStatus, jqXHR) {
...
},
error: function (jqXHR, textStatus, errorThrown) {
...
}
});
In the error handler, I can see my JSON object in the responseText property of the parameter "jqXHR". Did you encounter this problem ?
Thanks in advance !
The JSON you've supplied is valid (as confirmed by the JSON Lint tool); is it possible that the Server you are querying is returning an HTTP Error Status Code, or that an internal error is happening on the server side. You can confirm this by using a debugging proxy like Firebug, Chrome Developer tools.
I answer my own question... First I tested only with Internet Explorer 9; with an other browser, all worked as expected. After I cleared the Internet Explorer cache, the problem disappeared.

Categories