Please bare bear with me, I'm very new to Javascript. I am pulling my hair out trying to figure out why this won't work. Keep in mind I come from a Java background. I have a function 'getCsvData' and I'm essentially trying to parse a CSV file and dynamically add object properties to the datasource object and then return it. As you can see, outside the function 'getCsvData', I try to log the results after calling my function, but the result object is empty and there are no object propeties added to it.
I have a very strong feeling it has to due with closure/scope chain resolution that I'm still trying to learn and understand.
The questions are: Why aren't the properties added dynamically to the datasource object? I believe they actually are added in the scope of the anonymous function 'function(data)' passed as the second argument to '$.get', but they are immediately gone once the outer function 'getCsvData' returns. Why, and how can I fix this? Thanks!!
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/knockout-3.0.0.js"></script>
<script src="js/globalize.min.js"></script>
<script src="js/dx.chartjs.js"></script>
<script src="js/jquery.parse.js"></script>
$(function () {
function getCsvData(fileName, groupBy, year) {
var datasource = { }
$.get(fileName, function(data) {
var alldata = $.parse(data, { header: true });
for (var i = 0; i<alldata.results.rows.length;i++) {
var key = alldata.results.rows[i][groupBy]
if (key in datasource) {
datasource[key] = datasource[key] + 1
} else {
datasource[key] = 0
}
}
});
return datasource;
};
var results = getCsvData("data/data.csv", "Priority", 2012);
console.log(results)
for (key in results) {
console.log(key)
}
});
This is because get is called async, so datasource is the return value after initiating the get rather than after receiving the result (i.e. it is empty because the get completion has not been called yet). You should rather indicate completion with a callback or use jQuery.ajax() with the sync option to wait for the response to the get before returning from getCsvData. See here.
Related
First post, woo! Looked around quite a bit, but couldn't find a solution. Thanks for your attention and time. I have a class instance here with an array which I populate with objects from JSON data based on an ajax call. I would like to bind a function which renders the array as HTML, to an HTML button element.
Using when() after the instantiation and ajax call is complete, I can call upon properties of the instance, and even execute the function. But when I attempt to bind that same function to an HTML button click event, when I fire the event, the function references to an undefined 'theStats' object.
$(function ()
{
// Main Stats Object
var theStats = new Stats();
var initPop = theStats.populate();
$.when(initPop).done(function(a1)
{
// Returns defined instance property
console.log(theStats.arr.length);
// Function works properly
theStats.render();
// Why does this bind to an undefined 'theStats', when it executed
// only when the ajax call, as well as object construction is complete?
$("#render-stats").on("click", theStats.render);
});
});
I believe it is my misunderstanding about how asynchronous works? I was looking into event delegation as well, however I'm not creating a new HTML element, but an Object based on ajax. Any and all feedback is much appreciated (including my code practices, heh). Please let me know if I missed a similar solution, or if I've misunderstood how to stackoverflow. Thanks again!
class Stats
{
constructor()
{
// Creates Array for Stat Objects
this.arr = [];
}
/* Populate method requests thru ajax the JSON on the server on execution and
populates this current Stats object's array
*/
populate()
{
var that = this;
var ajaxGet = $.get("php/get.php",
function(jsonData, status)
{
var obj = JSON.parse(jsonData);
for (let key in obj)
{
var newStat = new Stat(obj[key].id, obj[key].distance, obj[key].date);
that.arr.push(newStat);
}
this.arr = that.arr;
console.log("Ajax Complete: " + this.arr);
});
return ajaxGet;
}
/* Render method creates HTML elements and renders them to the page using the data currently stored
within this particular Stats object */
render()
{
$("#test").text("");
for (let i = 0; i < this.arr.length; i++)
{
$("#test").append("<li class='runStat'> Run Number: " + this.arr[i].id + ", Distance: " + this.arr[i].distance + ", on Date: " + this.arr[i].date + "</li> <br/>");
}
}
}
I have been reading about Javascript Classes / Objects / Prototypes and come from a OOP background so I now wish to use Objects in Javascript.
However I think I am misunderstanding something. When using objects in the past in VB.net for example you created your object and was able to populate it by using dataclasses.
But here in the land of javascript things dont execute in the way I was expecting due to this async thing.
So I create my prototype as below and call the appropriate function but the function says it has fnished (but hasnt because it hasnt had a response from the $.post that is taking place, my code continues as null values and I dont get the info I want.
<!DOCTYPE html>
<html>
<body>
<button onclick="gogetperson()">Hello</button>
<p id="demo"></p>
<script>
function Person() {
this.firstName = '-';
this.surname= '-';
this.alias = 0;
}
Person.prototype.name = function() {
return this.firstName + " " + this.surname
};
Person.prototype.getPerson = function(personid)
{
var query = $.param({personid: personid});
var url = 'custom/person_get.php';
$.post(url, query, function (response) {
var obj = $.parseJSON(response);
this.firstname= obj['rFirstName'];
this.surname = obj['rLastName'];
this.alias = obj['rAlias'];
console.log(this.firstname);
});
}
function gogetperson()
{
var myPerson = new Person();
myPerson.getPerson(1)
console.log(myPerson.firstName);
}
</script>
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
</body>
</html>
So when my button runs the gogetperson function it finishes but has not got the data yet.
The console.log in the $.post section returns to the console the first name of my person but too late for me to use it.
Am I using prototypes in the wrong way?
I want to be able to use javascript as an object when getting data.
Or am I totally wrong.
My reason for wanting to use it this way was it seems the better choice over php objects.
Should I use PHP objects instead?
I ultimately want to get data from a mysql database and easily change my webpage with jquery and javascript.
You are missing one thing ,that is http call using $.post is asynchronous and it is not a blocking call. In order to get values back from getPerson() method, you have to pass a callback ( or function) in that function to get the result back but it is not a recomended approach . You can read about promises and use them because they are great.
However using a callback, you can do something like.
Person.prototype.getPerson = function(personid, cb)
{
var query = $.param({personid: personid});
var url = 'custom/person_get.php';
$.post(url, query, function (response) {
var obj = $.parseJSON(response);
var person = new Person();
person.firstname= obj['rFirstName'];
person.surname = obj['rLastName'];
person.alias = obj['rAlias'];
console.log(person.firstname);
cb(person);
});
}
And then you can call it like,
var myPerson = new Person();
function showPersonDetails(person){
console.log(person.name())
}
myPerson.getPerson(1, showPersonDetails);
I am trying to use chrome.storage.sync.get to get back the settings. What I don't understand is that when I call console.log(settings), it returns the correct values. But if I call console.log(settings.speeds), it returns the old values. I think this has something to do with the async nature of chrome.storage.sync.get. Can someone please explain what's going on here? And if there's a solution to this. I tried using callback but it didn't help. I guess one solution is to use just one level but that's not what I want.
Thanks all for the help.
var settings = {
speeds: {
speedInput1: 1.0, // after get, new value should be 11.23
speedInput2: 2.0 // after get, new value should be 4.50
},
shortcuts: {
shortCut1: '1',
shortCut2: '2'
}
};
chrome.storage.sync.get(settings, function(result) {
// Retrieve speed settings
for (var key in settings.speeds) {
if (key in result.speeds) {
settings.speeds[key] = result.speeds[key];
}
};
// Retrieve shortcut settings
for (var key in settings.shortcuts) {
if (key in result.shortcuts) {
settings.shortcuts[key] = result.shortcuts[key]
}
};
});
console.log(settings); // correct updated values
console.log(settings.speeds); // old values
I found a workaround for anyone who's interested. I wrapped the get call with a function and call that function and that solve the issue. As to why this solves the issue...I have no idea. Below is an example.
function getChromeStorage() {
chrome.storage.sync.get(settings, function(storage) {
// get stored values back;
}
getChromeStorage(); // calling it as a function solves the asynchronous issue
Why is it that myCollection.find().fetch() returns an empty array [] even though the call is made within if(data){...}? Doesn't the if statement ensure that the collection has been retrieved before executing the console.log()?
Template.chart.rendered = function() {
var data = myCollection.find().fetch();
if(data) {
console.log(data);
}
$('#chart').render();
}
This returns [] in the browser Javascript console.
You could use count() instead which returns the number of results. data itself would be an empty array, [] which isn't falsey ( [] == true ).
Also don't use fetch() unless you're going to use the raw data for it because its quite taxing. You can loop through it with .forEach if you need to.
var data = myCollection.find();
if(data.count())
console.log(data);
//If you need it for something/Not sure if this is right but just an example
$('#chart').render(data.fetch())
The problem is that you have to wait for data from the server. When you just use Template.name.rendered function it is immediately invoked. You have to use Template.name.helpers function to wait for data from the server. Everything is described in the documentation.
It seems when you "remove autopublish" you have to also subscribe on the client.
if(Meteor.isClient) {
Meteor.startup(function() {
Myvars = new Mongo.Collection("myvars");
Meteor.subscribe('myvars')
});
}
and enable allow and publish on the server
if(Meteor.isServer) {
Meteor.startup(function () {
Myvars = new Mongo.Collection("myvars");
Myvars.allow({
insert: function () {
return true;
},
update: function () {
return true;
},
remove: function () {
return true;
}
});
if (Myvars.find().count() == 0) {
Myvars.insert({myvalue:'annoyed'});
}
Meteor.publish("myvars", function() {
return Myvars.find();
});
});
}
I'm new to this as well. I was just looking to have a global value that all clients could share. Seems like a useful idea (from a beginner's perspective) and a complete oversight on the Meteor teams behalf, it was nowhere clearly documented in this way. I also still have no idea what allow fetch is, that too is completely unclear in the official documentation.
It does, but in javascript you have the following strange behaviour
if ([]){
console.log('Oops it goes inside the if')
} // and it will output this, nontheless it is counter-intuitive
This happens because JS engine casts Boolean([]) to true. You can how different types are casted to Boolean here.
Check if your array is not empty in the beginning.
a = [];
if (a.length){
//do your thing
}
I'm discovering the concept of "objects" in JavaScript. I'm making an RSS Parser, and I have an error (commented).
function MyParser (feed_url) { // Construct
"use strict";
this.feedUrl = feed_url;
this.pubArray = [];
if (typeof (this.init_ok) == 'undefined') {
MyParser.prototype.parse = function () {
"use strict";
var thisObj = this;
$.get(this.feedUrl, function (data, textStatus, jqXHR) {
if (textStatus == 'success') {
var xml = jqXHR.responseXML,
//lastBuildDate = new Date($(xml).find('lastBuildDate').text());
items = $(xml).find('item');
items.each(function () {
var pubSingle = thisObj.makeObj($(this).find('pubDate').text(),
$(this).find('link').text(),
$(this).find('title').text(),
$(this).find('description').text(),
$(this).find('encoded').text(),
$(this).find('commentRss').text(),
$(this).find('comments').last().text());
thisObj.pubArray.push(pubSingle);
});
console.log(thisObj.pubArray); // OK
}
}, 'xml');
console.log(this.pubArray); // Empty
return (this.pubArray);
};
MyParser.prototype.makeObj = function (pubDate, pubLink, pubTitle, pubDesc, pubContent, pubComCount, pubComLink) {
"use strict";
var pubSingle = {};
pubSingle.pubDate = new Date(pubDate);
pubSingle.pubLink = pubLink;
pubSingle.pubTitle = pubTitle;
pubSingle.pubDesc = pubDesc;
pubSingle.pubContent = pubContent;
pubSingle.pubComCount = pubComCount;
pubSingle.pubComLink = pubComLink;
return (pubSingle);
};
}
this.init_ok = true;
}
If you look at the console.log(), you'll see that the line // OK is outputting my array correctly.
But later, when returning from $.get, my array is empty.
Does anybody have an idea why, and how to correct that please?
This is not a problem with variable-scope. The problem here is that you're working with asynchronous flow and you're not thinking correctly the flow.
Let me explain:
When you do your .get, you fire a parallel asynchronous process that will request information from the browser, but your main program's flow keeps going, so when you get to your "return" statement, your array has not been filled yet with the response from your get method.
You should use your array from inside the get callback and not outside of it, since you can't guarantee that the array will have the information you need.
Does it make any sense?
Let me know!
Further explanation
According to your comments, you're still doing something like this:
var results = MyParser(feed_url);
//code that uses results.pubArray
And you cannot do that. Even though you're setting your "pubArray" inside your .get callback, you're trying to use pubArray right after you called MyParser and that's before the .get callback is called.
What you have to do, is call your next step on your program's logic from within the .get callback... that's the only way you can be sure that the pubArray is filled with proper data.
I hope that makes it clearer.
This is because your line
console.log(this.pubArray); // Empty
is being called directly after you issue your Ajax request; it hasn't had time to fetch the data yet. The line
console.log(thisObj.pubArray); // OK
is being called inside the Ajax callback, by which time the data has been fetched.
Thank you all, and particulary #Deleteman .
Here is what I did:
$.get(this.feedUrl, 'xml').success(function () {
thisObj.handleAjax(arguments[0], arguments[1], arguments[2]);
$(document).trigger('MyParserDone');
}).error(function () {
$(document).trigger('MyParserFailed');
});
Then, when i enter "HandleAjax", i'm back in my object context, so "this" refers to my object and the right properties. The only "problem" is that I have to set a listener (MyParserDone) to make sure the parsing is finished.