I'm fairly new to Javascript trying to access some data from a table I've created using footable. It should be simple but I can't seem to get it to work.
So far I can drill down to the table's rows using table.rows, which is returns a class. Within that class is an 'all' array which I'm trying to access. In the example, I'm following table_variable.rows.all works, but for me, the result returned is 'undefined'.
What is the correct way to access this array from the class? I've tried other ways such as:
table_variable.rows['all'] but none seem to have worked.
Many thanks
EDIT - more code:
I'm creating the table here and later passing the variable to the totals function:
ft = FooTable.init('#showcase-example-1')
function totals(ft)
{
console.log(ft);
console.log(ft.rows);
console.log(ft.rows.all);
}
The error is on the ft.rows.all line saying 'undefined'.
Related
In Google Sheets looking as part of a script to store data in a range to an array then to check whether a certain column has an "Y" in so I can loop through and store these columns in new arrays.
I have the following code but am getting this error - "TypeError: Cannot read property "0.0" from undefined."
var data = sheet.getRange("A6:U37").getValues;
if (data[20][i]=="Y"){
(The if code is generating the error)
Believe I am misunderstanding how the range is stored in the array causing the error any advice?
In the first line of code you provided, you are referencing the function getValues rather than actually calling it. In order to do so, you just have to modify the code as follows:
var data = sheet.getRange("A6:U37").getValues();
if (data[20][i]=="Y"){
Next time you have issues similar to this one, you can consider using logging or other debugging techniques in order to debug your script.
This may well be a very basic problem for anyone familiar with knockout.js, however it is causing me a problem.
I have a situation where I have a model containing an array of items that is dynamically added to and displayed in the view.
So far no problem, I can add entries into the model and the view is updated appropriately.
However. each item in the array itself has an array as a property, this is an array of object, and when I update the properties on these objects the view is not updated.
It is difficult to demonstrate this is a short code snippet so I have created a JsFiddle to show the problem:
https://jsfiddle.net/mikewardle/t0nvwqvL/1/
I have tries making the properties generated by calling
ko.observable()
rather than initializing them directly, but to no avail.
clicking the add button adds items to the array on the model itself.
either of the change... buttons alters the properties of the objects in the inner array.
As Ko2r stated your properties are not declared as observables and therefore updates will not be noticed by knockout.
To fix your changecolors() function you just need to change your linePusher function to create the color as an observable:
var linePusher = function (color, name) {
self.lines.push({ color: ko.observable(color), name: name, current:0 });
};
and then update usages of the color property to box/unbox the observable instead of replacing its value with the standard assignment operator, "="
for (i=0;i<counters.length;i++){
var lines = counters[i].lines();
for (j=0;j<lines.length;j++){
//lines[j].color = color;
lines[j].color(color); //sets the existing observable to the new value
}
}
Unfortunately I can't seem to make sense of your code enough to figure out what the increment() function is supposed to be doing so I can't tell you how to fix it, but hopefully the fixes to changecolors() put you on the right track.
You might want to read up on working with observables
I have some code I'm struggling with. The good news is the code working as intended for a single instance; after some thought I've decided to feature multiple of these image selectors on a page. This works but the ugly approach of duplicating the code doesn't scale well (e.g. what if you want 50 of these on there?) The snag I've hit is how I can refer to a specific array. Is an array even an ideal solution for this?
The Objective
I have a series of images that a user may select from, up to X amount. The selected image ids are stored in an array and the image is added to a "selected images pool". This occurs by using an onClick for the slider, I obtain the Id from the element attributes. This is where I'm getting stuck.
var dataArray = $(this).closest("[id^=carousel]").data('array');
var slideCounter = $(this).closest("[id^=carousel]").data('counter');
slideCounter = dataArray.length;
The slideCounter returns the length of the string, not the array elements. How can I tell this code to refer to a particular array? See the fiddle for a better idea of the markup and code: jsFiddle
I have no doubt that there is a better approach. I'm relatively new to front end work, I'd appreciate any insights, I've burnt some brain cells on this, thanks!
From looking at your HTML, it looks like when you do this:
var dataArray = $(this).closest("[id^=carousel]").data('array');
what you're trying to do is to read the name of an array with .data() and then somehow turn that name (which is a string) into the array that's in your variable. My guess is that there's probably a better way to structure your code rather than putting javascript variable names in your HTML. I'd probably put a key name in the HTML and then store the arrays in an object where you can access them by that key name at any time.
Without trying to refactor your code, here's an idea for what you were trying to accomplish:
If selectedSlidesIdArray1 is a global variable, then you can do this:
var dataArray = window[$(this).closest("[id^=carousel]").data('array')];
Using the [stringVariable] notation on an object, lets you access a property by a literal string or a variable that contains a string. Since all global variables are also properties on the window object, you can do it this way for global variables.
If selectedSlidesIdArray1 is not a global variable, then you should probably put it in an object and then you can do this:
var dataArray = yourObj[$(this).closest("[id^=carousel]").data('array')];
Instead of trying to translate an arbitrary string into a JavaScript variable of the same name, why not just use another array? You can have nested arrays, which is to say an array of arrays.
Thus, instead of selectedSlidesIdArray1, selectedSlidesIdArray2, etc., you would have one selectedSlidesIdArray with sub-arrays, which you could then pull the index for using a data attribute.
I have a JSON array coming from a REST API. I am using the Knockout mapping plugin to process the array and load the JSON into preset form values (if a user has added values to the form previously - I have data there to test the Knockout arrays). The form essentially adds or deletes div blocks with inputs so users can add/delete "work" experiences.
My trouble is with trying to decipher how the plugin maps the arrays. I am trying to locate a specific value (the id) of a row in the array so I can add it as a variable to tell the API to delete that specific row. I can get Knockout to explicitly output the row value in the html, but I can't figure out how to capture it otherwise. In the template "foreach" I have a button that references a "remove:" and that's where I'm stuck in trying to capture the value from the array.
For Example in the HTML:
This outputs the two rows of the "work" object no problem:
<span data-bind="text: ko.mapping.toJSON(workModel.work())"></span>
[{"id":"1","schoolID":"2","place":"","position":"Science Teacher","description":"I worked at ASD for 1 year as a Science teacher.","start":"2011","end":"2012","profileID":"91"},{"id":"2","schoolID":"1","place":"American School of Taiwan","position":"Science Guy","description":"I was just another science guy","start":"2008","end":"2011","profileID":"91"}]
This outputs the id of the first row and item in the array:
<span data-bind="text: ko.mapping.toJSON(workModel.work()[0].id)"></span>
"1"
But in the javascript, if you click on the remove button generated by the foreach template...
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work(this).id));
}
Gives me this error in Firebug, and then the UI reloads and drops out the template block I just clicked on.
Unable to parse bindings. Message: TypeError: workModel.work()[0] is undefined; Bindings value: text: ko.mapping.toJSON(workModel.work()[0].id)
Even though, if I replace the above alert with the explicit statement:
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work()[0].id));
}
I get the correct value of "1" again. I know it has to do with the "this" aspect of the code, but I'm not sure what the mapping plugin is doing so that I can capture the specific value from the array...make sense? Any help would be greatly appreciated.
I'm going out on a limb here, but I do think it's the this-problem yes. Scoping in Javascript can be a hassle sometimes. Try doing something like this in the scope containing the gone-function:
var self = this;
gone = function(work) {
alert(ko.mapping.toJSON(workModel.work(self).id));
}
Disclaimer: I'm not able to test this myself right now, but give it a try :)
I finally got it. It came from combining different post on Stack Overflow and also from the Knockout forums. I'm sure other folks have more elegant solutions than this, but it works for me.
In the foreach loop on the "Delete" (or whatever button you want to use to capture the value) button I included the following on the data-bind:
Remove
Then in the javascript I have:
var self = this;
var row_id;
self.remove = function(index){
var row_id = index;
alert(row_id);
}
The alert returns the row ID of the loaded JSON as I wanted. The $data.id() could be changed/used to return any mapped element from the loaded JSON. The row_id is then a global that can be accessed elsewhere as well.
In my JS I have the following ajax call, that bind the resulting json using knockout mapping plugin.
$.getJSON("/Game/GetRack", function (data) {
game.rack = ko.mapping.fromJS(data);
ko.applyBindings(game.rack, $('.rack')[0]);
});
/Get/GetRack returns:
[{"Color":3,"Letter":"a","Points":5},null,null]
As you can see, there is only one object in the array. The other two are nulls.
Now using knockout mapping I can do:
ko.mapping.fromJS([null, { Color: 55, Letter: "b", Points: 88 }, null], game.rack);
Doing so correctly updates my view and now I see only a letter B on a second position. The other two are nulls.
My questions is: Can I update a value at a particular position without using mapping.fromJS?
So assuming I have a letter A at index 0, I want to change the second null to
{ Color: 55, Letter: "b", Points: 88 }
and make my UI automatically update to resemble this change. How can this be done?
Edit:
I decided to go with the example given by John Earles. Unfortunately I still have a problem, because my array is two dimenstional.
You have a sample here:
http://jsfiddle.net/wgZ59/29/
(it's very similar to John Earles' example, but includes two dimensional array).
Can someone point out why clicking on change button does not change the values of elements? Is it also possible to change their values without calling HasMutated()?
And the last one (only if the previous two are solved). Is it possible to create html table statically (because e.g. I know that it will always be 3x3, so I want two print table with 3 rows and 3 columns and then bind each individual cell to my matrix cells. I tried that already and I had problems, because knockout didn't have the values for the cells...
EDIT2:
I managed to answer my above questions myself, fiddle example is here:
http://jsfiddle.net/wgZ59/44/
So, I can make a static table and bind individual cells, when I declare the array this way:
self.matrix = ko.observableArray([[0,0,0],[0,0,0],[0,0,0]]);
or
self.matrix = ko.observableArray([[,,],[,,],[,,]]);.
I can update the values and it works for a static table, but it does not work for a dynamic table (created dynamically by knockout). You can see the behavior on the fiddle page (link at the beginning of this edit). Do you know why pressing "change" button does not update the values in a dynamically created table?
I don't know exactly what you are trying to do, but if game.rack is an observableArray then you can manipulate it using JavaScript.
Here is the documentation page on observableArrays:
http://knockoutjs.com/documentation/observableArrays.html
That page shows the available "helper" methods that are available on the observableArray itself. Additionally you can manipulate the underlying array, but then you have to call 'valueHasMutated()' on the observableArray to let any registered listeners know about the changes.
Here is a simple JSFiddle showing manipulation:
http://jsfiddle.net/jearles/wgZ59/8/