I'm having trouble figuring out how to access object properties in Javascript. I have a function that returns an object, and I can see that object and all of its properties when it is logged to the console in Safari, but I can't get the property values for other functions. For example trying to alert out one of the properties returns 'undefined'.
The function that generates a object
getProfile : function() {
FB.api('/me', function(response) {
facebook.profile.user_id = response.id;
facebook.profile.name = response.name;
facebook.profile.firstName = response.first_name;
facebook.profile.lastName = response.last_name;
facebook.profile.gender = response.gender;
});
FB.api('/me/photos', {limit: 8}, function(response) {
facebook.profile.numPhotos = response.data.length;
for (key in response.data) {
var photoUrl = response.data[key].source;
eval('facebook.profile.photo' + key + '= photoUrl');
}
});
return facebook.profile;
}
Trying to use that function in another script
function loadProfile() {
var profile = facebook.getProfile();
console.log(profile);
alert(profile.name);
}
The function getProfile invokes FB API function FB.api which executes an asynchoronous HTTP request. In your loadProfile function call you call getProfile which immediately returns facebook.profile object which is not populated with data yet since the HTTP request is not finished yet.
Consider following change:
getProfile : function(fCallback) {
var bInfo = false,
bPhotos = false;
FB.api('/me', function(response) {
facebook.profile.user_id = response.id;
facebook.profile.name = response.name;
facebook.profile.firstName = response.first_name;
facebook.profile.lastName = response.last_name;
facebook.profile.gender = response.gender;
bInfo = true;
if (bPhotos)
fCallback(facebook.profile);
});
FB.api('/me/photos', {limit: 8}, function(response) {
facebook.profile.numPhotos = response.data.length;
for (key in response.data) {
var photoUrl = response.data[key].source;
eval('facebook.profile.photo' + key + '= photoUrl');
}
bPhotos = true;
if (bInfo)
fCallback(facebook.profile);
});
}
and call this function the following way now:
function loadProfile() {
facebook.getProfile(function (profile) {
alert(profile.name);
});
}
The reason why ou could see fields in the console is because you introspected the object after the asynch call was successfully executed. The alert call however executed immediately in the same thread on a not yet populated object.
Though 'Sergey Ilinsky' might have considered a right ground, but there are more things, that can be taken into consideration. Usually comes by mistaken, and hard to debug.
Sometime its so happens, that your object-keys contains spaces, let say:
var myObj = new Object();
myObj['key1'] = 'val1';
myObj['key2'] = 'val2';
myObj['key3 '] = 'val3'; //the key contains spaces here
myObj['key4 '] = 'val4'; // the key contains spaces here
so, when you log it to console by console.log(myObj), you will get:
Object { key1="val1", key2="val2", key3 ="val3", key4 ="val4"}
But when you access:
alert(myObj.key1); //Ok: val1
alert(myObj.key2); //Ok: val2
alert(myObj.key3); //undefined
alert(myObj.key4); //undefined
alert(myObj['key3']; //undefined
alert(myObj['key4']; //undefined
These are the common areas of mistakes, where one mistakenly puts the space, may be while doing copy-paste, and it so happens, that one says, console log is able to show it, but I cannot access it.
Related
Hi I am trying to retrieve some data from webservice using AngularJS $http get.
I have the following code snippet:
In the servicesjs:
.factory('BoothDesignatedCoordsService', ['$http', function ($http) {
var factory = {};
factory.getBoothDesignatedCoords = function (strBoothName, intFloorPlanID) {
var sendToWS;
var boothDesignatedCoords
var JSONObj = {
BoothName: strBoothName,
FloorPlanID: intFloorPlanID
};
sendToWS = JSON.stringify(JSONObj)
var urlBase = 'http://localhost:4951/wsIPS.asmx/fnGetBoothDesignatedCoords?objJSONRequest=' + sendToWS;
return $http.get(urlBase)
}
return factory;
}])
In the controllerjs:
var boothDesignatedCoords = BoothDesignatedCoordsService.getBoothDesignatedCoords(strListShortListedBooth[i], 3).success(function (response, data, status) {
console.log("successfully send booth name and floor plan id to ws");
console.log("data " + data + " , status : " + status);
console.log("data " + data);
boothDesignatedCoords = data;
for (var c = 0; c < boothDesignatedCoords.length; c += 2) {
}
The $http get is successful as I am able to print "successfully send booth name and floor plan id to ws" in the browser console log.
When I tried to print console.log("data " + data), it gives me some values of an integer array. That is exactly what I want. But in the controller I tried to assign data to the variable boothDesignatedCoords, the program does not run the for loop. Am I missing some code?
EDIT:
I tried to trace the code ( trace the variable called "data" in the controllerjs) and it says "data is not defined"
You appear to be confused about the methods available on the $http promise and their arguments. Try this
BoothDesignatedCoordsService.getBoothDesignatedCoords(strListShortListedBooth[i], 3)
.then(function(response) {
var data = response.data
var status = response.status
console.log('data', data) // note, no string concatenation
// and so on...
})
FYI, the success and error methods have been deprecated for some time and removed from v1.6.0 onwards. Don't use them.
I also highly recommend passing query parameters via the params config object
var urlBase = 'http://localhost:4951/wsIPS.asmx/fnGetBoothDesignatedCoords'
return $http.get(urlBase, {
params: { objJSONRequest: sendToWS }
})
This will ensure the key and value are correctly encoded.
I'm a little new to Javascript, and am having a hard time with the asynchronous aspect of it. My program checks values of two objects, where the second object doesn't have a vital property I need in order to complete the check. So I made a promise to get that value/property (the ID), and now I need to pass that ID value along to a check function. The check function should simply return a true/false to see if the ID's match. The value of the check function is passed to another function which then acts appropriately and edits the thing if necessary. So I basically can't access the value of tick outside it's brackets. I've included the snippet of my code where all of this is happening, as all of this is easier to visualize with it. Can someone provide me with a solution to this issue? Any advice would help immensely! I want to minimize the modification of the script as much as possible.
var Q = require('q');
getID = function(instance, person, callback){
var = deferred = Q.defer();
var url = 'www.blah.com';
var options = {
'url': url
};
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
}else{
var res = body;
var obj = JSON.parse(res);
var id = obj.id;
deferred.resolve(id);
} else deferred(obj);
});
check = function(instance, thing1, thing2){
var tick = true;
getID(instance, thing2).then(function(id)){
var id_1 = thing1.id; // thing1 passed into check with ID
var id_2 = thing2.id; // thing 2 now has id attached to it
if( id_1 == id_2 ){
tick = true; // VALUE 1
}else{
tick = false; // VALUE 2
});
// NEED VALUE 1 OR 2 OF TICK HERE
if(thing1.name == thing2.name){
tick = true;
else{
tick = false;
}
// similar checks to name but with ADDRESS, EMAIL, PHONE NUMBER
// these properties are already appended to thing1 and thing 2 so no need to call for them
};
editThing = function(instance, thing, callback){
var checked = check(instance, thing1, thing2);
if(checked){
// edit thing
}else{
// don't edit thing
};
Since you're making a promise of work to be done, and you need output from that work, you'll need pass that promise along to the code who's wanting the final output.
I'm not going to try to rewrite the code from your post, so allow me to paraphrase:
getThing = function(thing){
var deferred = Q.defer();
...
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
} else {
...
deferred.resolve(thingMadeFromResponse);
}
});
return deferred;
}
check = function(thingWeHave, thingWeNeedFetched){
return getThing(thingWeNeedFetched).then(function(thingWeFetched)){
// check logic
checked = thingWeHave.id == thingWeFetched.id;
...
return checked;
});
};
editThing = function(instance, thing, callback){
check(thingWeHave, thingWeNeedFetched).then(function(checked) {
if(checked){
// edit thing
}else{
// don't edit thing
}
});
};
Promises
“thenable” is an object or function that defines a then method.
p.then(function(value) {
// fulfillment
console.log(value + ' is now available and passable via function argument');
}, function(reason) {
// rejection
});
Hello I have the following code in a Content Editor Web Part, which retrieves the current user's name and displays it in a message box :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function getUser() {
var userid = _spPageContextInfo.userId;
//alert(userid);
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
var requestHeaders = { "accept": "application/json;odata=verbose" };
$.ajax({
url: requestUri,
contentType: "application/json;odata=verbose",
headers: requestHeaders,
success: onSuccess,
error: onError
});
function onSuccess(data, request) {
var loginName = data.d.Title;
alert(loginName);
}
function onError(error) {
alert("Error on retrieving current user.");
}
}
$(document).ready(function() {
getUser();
});
</script>
I was also able to display the email with alert(data.d.Email);.
However, when I try calling data.d.Groups (as per the documentation - which shows that a Groups property exists), I see a message box with [object Object].
How can I retrieve the individual items from this (what I am assuming is a) collection?
I have tried :
var group = data.d.Groups[0];
alert(group);
But this just comes up with undefined.
Am I wrong in thinking that this object will contain my Department?
Either way, is there a way of iterating through these objects, or have I done it correctly but on an empty array?
Thank you
Attempt at Logging the groups
function onSuccess(data, request) {
var loginName = data.d.Title;
console.log(loginName);
var groups = data.d.Groups;
console.log(groups);
}
I can't see either of the above logs in the F12 console window... (Internet Explorer)
Attempt 2 - Logging Successful
Using the code below, I was able to achieve the same results as before, but this time the console.log() calls actually worked (still have no idea why the previous ones didn't):
ExecuteOrDelayUntilScriptLoaded(init,'sp.js');
var currentUser;
function init(){
this.clientContext = new SP.ClientContext.get_current();
this.oWeb = clientContext.get_web();
currentUser = this.oWeb.get_currentUser();
this.clientContext.load(currentUser);
this.clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}
function onQuerySucceeded() {
var groups = currentUser.get_groups();
alert(groups);
console.log(groups);
var name = currentUser.get_loginName();
alert(name);
console.log(name);
var id = currentUser.get_id();
alert(name);
var title = currentUser.get_title();
alert(title);
var email = currentUser.get_email();
alert(email);
}
function onQueryFailed(sender, args) {
alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
After calling console.log(groups);, the following appeared in the F12 console :
"data.d.Groups" is the Object, When you pass this into .html(data.d.Groups) you will get it as [object Object] only because object will convert as the string Just loop the object and you will get the key and value
for (key in data.d.Groups){
alert("key: " + key + "value :" + data.d.Groups[key]);
}
I was able to find a rather ugly solution to this, but it does work.
First, we need to call some .js files in preperation:
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script src="/_layouts/15/SP.Runtime.js"></script>
<script src="/_layouts/15/SP.js"></script>
<script src="/_layouts/15/SP.UserProfiles.js"></script>
Then, inside a <script language="javascript" type="text/javascript"> tag, we declare some global variables and 2 main functions...
var currentUser;
var currentUserName;
var property = "Department";
1. GetCurrentUserProperty(property):
This function actually only gets the current user for us and, if successful will call loadUserData (which actually gets the property we defined earlier for the given user:
// This function first gets the current user's firstname.lastname username (e.g. Joe.Bloggs).
// If this is successful, it calls the loadUserData function, which will retrieve the user's
// property which was defined in the global "property" variable.
function GetCurrentUserProperty(){
this.clientContext = new SP.ClientContext.get_current();
this.oWeb = clientContext.get_web();
currentUser = this.oWeb.get_currentUser();
this.clientContext.load(currentUser);
this.clientContext.executeQueryAsync(onQueryUserSuccess, onQueryUserFail);
}
function onQueryUserSuccess() {
// If the query is successful, extract the first.last username and then call loadUserData
window.currentUserName= currentUser.get_loginName().split("\\")[1];
loadUserData(window.currentUserName);
}
function onQueryUserFail(sender, args) {
alert('Failed to retrieve user name');
}
2. loadUserData
This function takes the given user.name and will get the property that is stored in property for that user. Here, in the success function, I am just outputting the result to an alert window:
function loadUserData(userName){
//Get Current Context
var clientContext = new SP.ClientContext.get_current();
//Get Instance of People Manager Class
var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
//Property to fetch from the User Profile
var strDepartment = window.property;
//If you are on On-Premise:
var targetUser = "BARDOM1\\" + userName;
//Create new instance of UserProfileProperty
departmentProperty = peopleManager.getUserProfilePropertyFor(targetUser, strDepartment)
//Execute the Query. (No load method necessary)
clientContext.executeQueryAsync(onSuccess, onFail);
}
function onSuccess() {
var messageText = window.property + " is " + departmentProperty .get_value();
alert(messageText);
}
function onFail(sender, args) {
alert("Error: " + args.get_message());
}
Finally, to actually run this process, we need to call GetCurrentUserProperty();. I put all of this code into a file called testproperty.js and saved it in SiteAssets. Then, on the page where we want the code to run, add a Content Editor Web Part and in edit -> path the call is ../../SiteAssets/testproperty.js. This will run once the page load - hope this helps anyone else who may be stuck on this!
I'm trying to add both Facebook and Twitter share counters together, however all my efforts have failed.
<script>
tweets = 0;
function getTwitterCount(url){
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function(data){
tweets = data.count;
$('#twitterCount').html(tweets);
return true;
});
}
var urlBase='http://abcdfav4.com/About/KickStarterCampaign/Rewards/ThePeaceSensation.html';
getTwitterCount(urlBase);
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/http://abcdfav4.com/About/KickStarterCampaign/Rewards/ThePeaceSensation.html',
success: function(data) {
showCount(data);
}
});
var fbshares = 0;
function showCount(responseText) {
// Save the parsed JSON
var json = responseText;
// Check if the response contains a 'shares' property
// If it doesn't, we can just exit this function
if (!json.hasOwnProperty('shares'))
return;
// A shares property and value must exist, update
// the span element with the share count
fbshares = json.shares;
$('#fb-share-count').html(fbshares);
}
var TotalShares = tweets + fbshares;
$('#total-share-count').html(TotalShares);
</script>
I could really do with some outside insight as I've been working crazy to get this website up and running ASAP and I'm probably overlooking the most obvious of things...
Console Log Reads:
Uncaught ReferenceError: fbshares is not defined
sdk.js:64 Invalid App Id: Must be a number or numeric string representing the application id.
card.html?v=2:79 Uncaught ReferenceError: I18n is not defined
sdk.js:64 FB.getLoginStatus() called before calling FB.init().
However despite this message, the Facebook and Twitter counters are working 100%, I just cannot get them to add together.
Best Regards,
Tim
Here's a solution:
var tweets;
function getTwitterCount(url) {
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function(data) {
tweets = data.count;
$('#twitterCount').html(tweets);
showTotal();
});
}
var urlBase = 'http://abcdfav4.com/About/KickStarterCampaign/Rewards/ThePeaceSensation.html';
getTwitterCount(urlBase);
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/http://abcdfav4.com/About/KickStarterCampaign/Rewards/ThePeaceSensation.html',
success: showCount
});
var fbshares;
function showCount(responseText) {
// Save the parsed JSON
var json = responseText;
// Check if the response contains a 'shares' property
// If it doesn't, we can just exit this function
if (!json.hasOwnProperty('shares'))
return;
// A shares property and value must exist, update
// the span element with the share count
fbshares = json.shares;
$('#fb-share-count').html(fbshares);
showTotal();
}
function showTotal() {
if (tweets !== undefined && fbshares !== undefined)
$('#total-share-count').html(tweets + fbshares);
}
Basically showTotal attempts to sum the two values after each callback. When both values are defined, it will place the sum into the HTML.
I have an array that I would like to fill with responses from AJAX calls like so:
var dict = [];
function fillArray(){
$.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++){
$.get("https://api.twitch.tv/kraken/streams" , function(data){
dict[data.key] = data;
});
});
}
function doStuff(){
// dict is empty or undefined here
}
How would I fill dict with objects so that I could retrieve them inside doStuff()? Currently, I am able to insert stuff into dict but when I try accessing dict outside the fillArray() function, I get an empty dict variable since I'm assuming the GET call is asynchronous and doesn't happen until after all the JS code has executed...
So, dict is an object that has no push method. You'd need dict=[]; If you had to have {}, then you'd need key:value pairs to populate it, such as:
dict[key] = value;
You are going to have to keep track of the number of calls that you are doing in that for loop and fire a callback function once they are all complete. I'm not totally confident about your current solution, with calling an indefinite amount of ajax requests, but I also don't fully understand the scope of your problem or the server that you're talking to.
So basically you will have to do something like this with what you have currently:
var dict = [],
requestsCompleted = 0;
function dictFilled() {
// do something with your dict variable;
}
function fillArray(){
$.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++){
$.get("https://api.twitch.tv/kraken/streams" , function(data){
dict[data.key] = data;
requestsCompleted++;
if (requestsCompleted === phpReturnVal.length) {
dictFilled();
}
});
});
}
This haven't been tested, but basically you will have to define a function that will have access to the array that you are filling and call it once all you asynchronous requests finish successfully. For tasks like this though I recommend you take a look at jQuery's Deferred API. There is always a chance that one of those requests will fail and your application should know what to do if that happens.
I'm assuming the GET call is asynchronous and doesn't happen until
after all the JS code has executed...
Appear correct.
Try
var dict = [];
function fillArray() {
// return jQuery promise object
return $.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++) {
// call same `url` `phpReturnVal.length` times here ?,
// returning same `data` response at each request ?,
// populating, overwriting `dict` with same `data.key` property ?
$.get("https://api.twitch.tv/kraken/streams" , function(data) {
dict[data.key] = data;
});
}; // note closing `}` at `for` loop
// return value
return dict
});
}
function doStuff(data) {
// `data`:`dict`, promise value returned from `fillArray`
console.log(data);
}
fillArray().then(doStuff, function error(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
});
var arr = ["a", "b", "c"];
var response = {
"a": 1,
"b": 2,
"c": 3
};
var obj = {};
var dict = [];
function fillArray() {
return $.when(arr).then(function(phpReturnVal) {
for (var i = 0; i < phpReturnVal.length; i++) {
// return same `response` here ?
$.when(response).then(function(data) {
dict[arr[i]] = data;
});
};
return dict
});
}
function doStuff(data) {
console.log(data)
}
fillArray().then(doStuff, function error(err) {
console.log(err)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>