After looking for other answers to make a variable global I am struggeling for some time now, it looks quite simple but it just doesn't seem to work.
My code is getting data from a CSV file and returning a variable called 'chart' containing an Array. This Array variable is to be used outside the function in a Highchart graph. (The local returned Array is correct)
I am trying to make the variable inside the function "global" by attaching it as a property of the window. Like this: turn javascript local variable into global variable
But in my code this doesn't work out:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data/data.csv",
async: false,
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(data) {
var table = data.split("\n").map(line => line.split(","));
var categories = table[0].slice(2).map(e=>e*1);
data = table.slice(1).map(a => ({"name": a[0], "id": parseInt(a[1]), "data": a.slice(2).slice(0).map(e=>e*1)}));
var lengthdata = data.length - 1;
var chart = data.splice(0, lengthdata);
window.chartglobal = chart;
console.log(chart);
};
console.log(chartglobal);
What am I missing here or are there better ways than the window option for mmy specific situation?
EDIT:
The code is used in leaflet where the data is connected to leaflet markers using map.on and a marker id. That way is doesn't matter that the call ajax request is a pseudo ready event which is fired after trying to get the global value. I don't know what changing the async to 'true' alters but it works either way.
The variable is used in a map.on like this:
map.on('popupopen', function(e) {
var marker = e.popup._source.feature.id;
var search = function(name) {
for(var key in chartglobal) {
if(chartglobal[key].id === name) {
return chartglobal[key];
}}};
var outputhighchart = search(marker);
var chartdef = [];
chartdef.push(outputhighchart);});
The console.log was not logging because of the ajax call, the problem was somewhere in the map.on, which I overlooked because focusing on the global variable. Thanks for helping me out and directing in the right way.
why dont you declare your variable outside your function and give a dummy val
var chartglobal = "dummy";
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data/data.csv",
async: false,
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(data) {
var table = data.split("\n").map(line => line.split(","));
var categories = table[0].slice(2).map(e=>e*1);
data = table.slice(1).map(a => ({"name": a[0], "id": parseInt(a[1]), "data": a.slice(2).slice(0).map(e=>e*1)}));
var lengthdata = data.length - 1;
var chart = data.splice(0, lengthdata);
chartglobal = chart;
console.log(chart);
};
//as #Artur Filipiak sais at this point variable is not setted yet. so should print "dummy"
console.log(chartglobal);
Related
I am new to js.
I am trying to call the API and save the data in a variable (obj = [])
But i go thru the console, my ajax call called two times. May i know why?
This is the console on my browser that i found out it is called two time:
Below is my code:
$(function (){
var obj = [];
var selected = $("select.dr-down option:selected").click().val();
var markup = '';
getAPI();
console.log('obj = ', obj);
function getAPI() {
$.ajax({
url: 'http://www.mocky.io/v2/5d73bf3d3300003733081869',
method: 'GET',
}).done(function (data) {
data.forEach(function (data) {
obj.push(data);
});
})
}
})
This is the continue from this : Link
My storyboard is like this. I want to autorefresh my page. Coz I create a live monitoring to manage requests from my users. When a new comment is create from user, I wanna create a notification.
So, I choose use js/jquery.
I try so hard to implement that to my ajax response like this
/* This is function to initialized old comment as return a first */
function initializedFirstComment(handleData) {
$.ajax({
url: "<?php echo base_url() . 'control_closing/getKomentarMD/' ?>",
type: 'POST',
dataType: 'json',
success: function(data) {
handleData(data);
}
});
}
For the second array is like this :
/*For the second array */
function refreshByManager(first) {
var audioElement = document.getElementById('notif-md');
audioElement.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
setTimeout(function() {
$.ajax({
url: '<?php echo base_url() . 'control_closing/getKomentarMD/' ?>',
type: 'POST',
dataType: 'json',
success: function(second) {
console.log(first); // For debug first array, and in firebug it success.
console.log(second);// For debug second array, and in firebug it success.
var difference = function(list1, list2, id, attr) {
var map = {};
// Create map.
list1.forEach(function(item) {
map[item[id]] = item;
});
// Find diff.
return list2.filter(function(item) {
var target = map[item[id]];
// Return if the item is not exist in first, or the target attr is different.
return (typeof target === 'undefined' || item[attr] !== target[attr]);
});
}
var diffs = difference(first, second, 'id_request', 'comment_bapak');
console.log(diffs);
alert(diffs[0].comment_bapak);
refreshByManager();
}
});
}, 5000);
}
So, in main document will be like this.
$(document).ready(function() {
initializedFirstComment(function(output) {
refreshByManager(output); // Check it
})
}
I dont understand, why the output is like this :
The result of debug :
console.log(diffs);
alert(diffs[0].comment_bapak); is =>
[]
TypeError: diffs[0] is undefined
I am so desperate. Any help it so appreciated.
Well, I tested the code a bit and the difference function returns an empty list if the list2 doesn't contain objects that differ from the objects of the list1.
So I would check the diffs variable first, before trying to access it.
var diffs = difference(first, second, 'id_request', 'comment_bapak');
if (diffs) {
console.log(diffs);
alert(diffs[0].comment_babak);
}
Another problem I noticed is that you're defining the difference function over and over again in the success callback function. You should move it outside from there.
I have FullCalendar (1.6.4) working with a single JSON feed (a single user's calendar). Now, I want to enhance the functionality so the calendar will display multiple user calendars (the admin and their child account calendars). Until the calendar is called, I won't know how many user calendars will be called. So, I have a Ajax function call a PHP script that returns a JSON feed of all user ID's for the admin account.
$(document).ready(getUsers);
function getUsers() {
var data = $.ajax( {
url: '/s/calendar_userdata.php',
method: 'GET',
dataType: 'json',
success: function(userData) {
var user_count = userData.length;
var uid_array = [];
// Create the sources
for (var i = 0; i < user_count; i++)
{
var uid = userData[i].uid;
if(!uid_array[i]) uid_array[i] = [];
uid_array[i] = uid;
}
}
});
loadCal();
}
The Ajax call works. I get an array (uid_array) such as [7,47] back, as expected. I would like to use this array within my loadCal function as illustrated below, but I can't get it to persist after the getUsers function has concluded.
function loadCal() {
$('#calendar').fullCalendar({
eventSources: [
{
url: '/s/events.php',
type: 'GET',
data:
{
uid: uid_array
}
}
],
editable: true,
.........
I've tried:
1) Creating a global variable by initially defining uid_array outside of getUsers without the "var".
2) Setting "window.uid_array = uid_array;" within the getUsers function.
3) Adding "return uid_array;" at the end of the getUsers function.
4) Adding a closure at the end of the getUsers function. But, I don't grasp them well enough to believe I did it correctly.
I have 2 questions:
1) How do I make the array (uid_array) available outside of getUsers?
2) In what format does the array need to be so that fullCalendar will recognize and use it?
I've been stuck on this for a while. Thanks much.
I think if you change the location of loadCal function you can accomplish your objective:
function getUsers() {
var data = $.ajax( {
url: '/s/calendar_userdata.php',
method: 'GET',
dataType: 'json',
success: function(userData) {
var user_count = userData.length;
var uid_array = [];
// Create the sources
for (var i = 0; i < user_count; i++)
{
var uid = userData[i].uid;
if(!uid_array[i]) uid_array[i] = [];
uid_array[i] = uid;
}
//CALL loadCal FROM HERE
loadCal(uid_array);
}
});
}
Modify loadCal to accept array of uids:
function loadCal(uidArray) {
$('#calendar').fullCalendar({
eventSources: [
{
url: '/s/events.php',
type: 'GET',
data:
{
uid: uidArray
}
}
],
editable: true,
When you are making ajax call in getUsers it is not returned and loadCal is called. So you need to make sure that it is called only after ajax is returned that is in success callback.
I'm working on creating a Users collection with the ability to then grab single users inside. This will be used to match from another system, so my desire is to load the users once, and then be able to fine/match later. However, I'm having a problem accessing the outer users collection from an inner method.
function Users(){
var allUsers;
this.getUsers = function () {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
allUsers = data;
}
});
return allUsers;
};
this.SingleUser = function (name) {
var rate = 0.0;
var position;
this.getRate = function () {
if(position === undefined){
console.log('>>info: getting user position to then find rate');
this.getPosition();
}
$.ajax({
url: '../app/data/rates.json',
async: false,
dataType: 'json',
success: function(data) {
rate = data[position];
}
});
return rate;
};
this.getPosition = function () {
console.log(allUsers);
//position = allUsers[name];
return position;
};
//set name prop for use later I guess.
this.name = name;
};
}
and the test that's starting all of this:
it("get single user's position", function(){
var users = new Users();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
The getPosition method is the issue (which might be obvious) as allUsers is always undefined. What I have here is yet another attempt, I've tried a few ways. I think the problem is how the Users.getUsers is being called to start with, but I'm also unsure if I'm using the outer and inner vars is correct.
Though the others are correct in that this won't work as you have it typed out, I see the use case is a jasmine test case. So, there is a way to make your test succeed. And by doing something like the following you remove the need to actually be running any kind of server to do your test.
var dataThatYouWouldExpectFromServer = {
bgrimes: {
username: 'bgrimes',
show: 'chuck',
position: 'mgr'
}
};
it("get single user's position", function(){
var users = new Users();
spyOn($, 'ajax').andCallFake(function (ajaxOptions) {
ajaxOptions.success(dataThatYouWouldExpectFromServer);
});
users.getUsers();
var someone = new users.SingleUser('bgrimes');
var position = someone.getPosition();
expect(position).not.toBeUndefined();
expect(position).toEqual('mgr');
});
This will make the ajax call return whatever it is that you want it to return, which also allows you to mock out tests for failures, unexpected data, etc. You can set 'dataThatYouWouldExpectFromServer' to anything you want at any time.. which can help with cases where you want to test out a few different results but don't want a JSON file for each result.
Sorta-edit - this would fix the test case, but probably not the code. My recommendation is that any time you rely on an ajax call return, make sure the method you are calling has a 'callback' argument. For example:
var users = new Users();
users.getUsers(function () {
//continue doing stuff
});
You can nest them, or you can (preferably) create the callbacks and then use them as arguments for eachother.
var users = new Users(), currentUser;
var showUserRate = function () {
//show his rate
//this won't require a callback because we know it's loaded.
var rate = currentUser.getRate();
}
var usersLoaded = function () {
//going to load up the user 'bgrimes'
currentUser = new users.SingleUser('bgrimes');
currentUser.getRate(showUserRate);
}
users.getUsers(usersLoaded);
your approach to fill the data in allUsers is flawed
the ajax call in jquery is async so every call to users.getAllUsers would be returned with nothing and when later the success function of the jquery ajax is called then allUsers would get filled
this.getUsers() won't work. Its returning of allUsers is independent from the ajax request that fetches the data, because, well, the ajax is asynchronous. Same with getRate().
You'll have to use a callback approach, where you call getUsers() with a callback reference, and when the ajax request completes, it passes the data to the callback function.
Something like:
this.getUsers = function (callback) {
// ajax to that Jasmine behaves
$.ajax({
url: '../app/data/jira_users.json',
async: false,
dataType: 'json',
success: function(data) {
callback(data);
}
});
};
And the call would be along the lines of:
var user_data = null;
Users.getUsers(function(data) {
user_data = data;
});
I have an issue with a method ive created for an object ive created. one of the methods requires a callback to another method. the problem is i cant add the data to the object that called the method. it keeps coming back as undefined. otherwise when i send the data to the console it is correct. how can i get the data back to the method?
var blogObject = new Object();
var following = [...];
//get posts from those blogs
blogObject.getPosts = function () {
var followersBlogArray = new Array();
for (var i = 0; i < this.following.length;i++){
var followersBlog = new Object();
// get construct blog url
var complete_blog_url = ...;
i call the getAvatar function here sending the current user on the following array with it.
followersBlog.avatar = blogObject.getAvatar(this.following[i]);
that part goes smoothly
followersBlogArray.push(followersBlog);
}
this.followersBlogArray = followersBlogArray;
}
here is the function that gets called with the current user in following array
this function calls an ajax function
blogObject.getAvatar = function (data) {
console.log("get avatar");
var url = "..."
this ajax function does its work and has a callback function of showAvatar
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url,
data: {
jsonp:"blogObject.showAvatar"
}
});
});
}
this function gets called no problem when getAvatar is called. i cant however get it to add the data to the followersBlog object.
blogObject.showAvatar = function (avatar) {
return avatar
}
everything in here works fine but i cant get the showAvatar function to add to my followersBlog object. ive tried
blogObject.showAvatar = function (avatar) {
this.followersBlog.avatar = avatar;
return avatar
}
that didnt work of course. it shows up as undefined. can anyone help?
so somethings like...
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url,
complete: function () {
this.avatar = data;
}
data: {
jsonp:"blogObject.showAvatar"
}
});
});
}
Welcome to the world of asynchronous programming.
You need to account for the fact that $.ajax() will not return a value immediately, and Javascript engines will not wait for it to complete before moving on to the next line of code.
To fix this, you'll need to refactor your code and provide a callback for your AJAX call, which will call the code that you want to execute upon receiving a response from $.ajax(). This callback should be passed in as the complete argument for $.ajax().
The correct option for setting the JSONP callback is jsonpCallback. The recommendation from the API for .ajax(...) is to set it as a function.
{
// ...
jsonpCallback: function (returnedData) {
blogObject.showAvatar(returnedData);
},
// ...
}