Develop Reference

Access an array within a class using Javascript

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'.

KnockoutJS - UI not updating with built-in observableArray methods except push and pop

When I do a push or pop operation on my observable array, it is reflected in the ui. However other operations on the array won't change anything in the UI. Here's an example of my case:
<ul data-bind="foreach: addresses">
<!-- ko template: {name: 'AddressItemTemplate', data: {address: $data, page: 'update-page'} }-->
<!-- /ko -->
</ul>
I use my template in two different pages and thats the reason I am using the template data like that.
<script type="text/html" id="AddressItemTemplate">
<p data-bind="text: (page == 'update-page') ? 'updating' : 'declined'"</p>
<p data-bind="text: address.title"></p>
</script>
Now on js side, ofc I declared the addresses as an observable array
this.addresses = ko.observableArray([addresObject1, addressObject2, ...])
Somewhere on the page, I edit the address values. To have UI reflecting the changes, I do the following:
//suppose we know that the first address is being edited
var tmp_addresses = addresses();
tmp_addresses[0].title = 'blabla';
addresses(tmp_addresses);
And there it is, in the viewModel, I can see that the content of the addresses has been updated, but not in the UI??
addresses.push(someAddressObject);
or
addresses.pop();
works (updates the UI with the new/removed element). But addresses.splice(0, 1, newAddressObject) does not do anything in the UI again.
What am I missing here? How can push pop work and not the others??
Am I experiencing a bug in knockout framework?
UPDATE
I found out a way to do it, but there's something wrong. I'll come to that but first:
I am well aware that if I use observable objects in the observable array, the changes would be reflected in UI. However that is exactly the thing I want to avoid. It is an overkill.
Observable properties should be required in cases where properties are really exposed to user interaction. For example, if you have a UI for setting each of the fields of an object, then yes, observable property would be the right call.
However in my case, I dont even have a UI for updating the address field. Moreover, I dont need tinkering and constantly watching all the properties of all the addresses. In my case, every now and then an update occurs from the server and that changes only a single field in a single address field.
On another perspective the way I suggest should work. I simply update the whole array at once, not every element individually. It's the exactly the same logic with:
someObservableObject({newObject: withNewFields, ...});
Thats why I dont need my objects as observables. I simply want to re-declare the array and be done with the change. For example, it is advised that if you are going to make lots of pushes into the observable array, dont use array.push(...) multiple times, instead re-declare the larger array on to the observable array variable in a similar way I do it in my question. Otherwise, I am telling knockout to track every single object and every single field in them, which is hardly what I want.
Now, I finally got it working but the way I do suggests that there is a cleaner way to do it.
I found out that, the items in the observable array are somehow tracked and not updated when you re-declare the array with them. For example the code I gave in the question would not work. However the code below works:
var tmp_addresses = addresses();
var tmp_addr = tmp_addresses[0];
var new_addr = {};
Object.keys(tmp_addr).forEach(function(key){
new_addr[key] = tmp_addr[key];
});
new_addr.title = 'Hey this is something new!'
addresses.splice(0, 1, new_addr);
Not satisfied? The code below is going to work as well, because we are re-defining the array:
var newAddressObject1 = {...}, newAddressObject2 = {...};
addresses([newAddressObject1, newAddressObject2]);
But the following would not work!
var tmp_addresses = addresses();
var tmp_addr = tmp_addresses[0];
tmp_addr.title = 'Hey this address wont update';
addresses.splice(0, 1, tmp_addr);
How come? I think knockout adds an internal property to his items in observableArrays and when I try to reinsert one, it will not update.
My problem has now morphed into creating a new object with the same properties of the desired item in the observable array. The way I coded above is simply very dirty-looking. There's gotta be a better way to do that

You are wrongly assigning value to observable title that is the reason why UI not reflecting its changes (2 way binding broken).
Thumb rule is always use () notation while assigning a value to observable (keeps two way binding intact)
viewModel:
var ViewModel = function () {
var self = this;
self.addresses = ko.observableArray([{
'title': ko.observable('one')
}, {
'title': ko.observable('two')
}])
setTimeout(function () {
var tmp_addresses = self.addresses();
tmp_addresses[0].title('blabla'); //assigning data to observable
self.addresses(tmp_addresses);
}, 2000)
};
ko.applyBindings(new ViewModel());
working sample here
PS: Don't get deceived by seeing the value change in viewModel the moment you done assigning using = two binding is broken UI wont reflect VM'S changes .
when you splice up your observableArray UI takes it changes check here

The problem was exactly as #jason9187 pointed out in the comments: The references of the objects in the observable array does not change when I edit a field of them. Therefore, KO would not interpret my array as changed. If the observableArray had contained simple data types, then the way I suggested could work without a problem. However, I have an Object in the array, therefore although I edit the Object, it's reference (pointer) remains the same, and KO thinks that all Objects are the same as before.
In order to achieve what I wanted, we have to solve the deep cloning problem in javascript like in this post.
Now there's a trade-off there, deep cloning is very simple in vanilla if you don't have a circular architecture or functions in your objects. In my case, there's nothing like that. The data comes from a restful API. If anybody in the future gets hold of this problem, they need to deep-clone their 'hard-to-clone' objects.
Here's my solution:
var tmp_addresses = JSON.parse(JSON.stringify(addresses())); //Creates a new array with new references and data
tmp_addresses[0].title = 'my new title';
addresses(tmp_addresses);
Or, if you can create address objects, following will work as well:
var tmp_addresses = addresses();
tmp_addresses[0] = new randomAddressObject();
addresses(tmp_addresses);
Here is a fiddle that I demonstrate both of the methods in a single example

How can jade attributes be set for Dynamically click generated variables in Bootstrap Modal?

I have returned a valid JSON through mongoose to my Jade file, the JSON named things looks like this,
[{
_id: ObjectId("7788h356i0909v7863b75999"),
important: "Critical123",
property:[{name: "Test456"},{name: "Test789"},{name: "Test101112"}]
},
{
_id: ObjectId("7788h356i0909v7863b75908"),
important: "Critical",
property:[{name: "TestNew"},{name:"TestNewlyOpened"}]
}
]
I have a certain jade file spitting out details of a page I wanted like below
Basically when you click on glyphicon-plus-sign, I am opening a modal window
if thing
each something in thing
tr.odd.gradeX(id="firstRow" rowspan="2")
td.imp(type="button") #{something.important}
a.glyphicon-plus-sign(id="#{something._id}" data-toggle="modal" data-target=".bs-example-modal-lg")
My Modal is declared in the samefile below as
.modal.fade.bs-example-modal-lg(id="modalBoxSomething" tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true', style='display: none;')
.modal-dialog.modal-lg
.modal-content
.modal-header#headerModal
h4#myLargeModalLabel.modal-title
button.close(id="modalCloseButton" type='button', data-dismiss='modal', aria-label='Close')
span(aria-hidden='true') ×
.modal-body
.somethingDetails.col-md-6.col-lg-6
if property
each nameProperty in property
p#propertyName #{nameProperty.name}
This doesn't work. Can I loop over nested sub items in an array for a specific item click event?
I want to repeat the values of property array for each something in this modal window.
Or Should I write a Javascript to do this?
for(var k=0; k<things.length; k++){
for(var m=0; k<things[k].property.length; m++){
$('#propertyName').append('<p>'+JSON.stringify(things[k].property[m].name+'</p>');
}
}
What is the best practice here? The Javascript solution works, But it would be great if what I am trying to achieve in Jade works sublimely.

Can I loop over nested sub items in an array for a specific item click event?
Of course you can. Jade templates are rendered using JavaScript and you can also use raw JavaScript in your templates by using - in the beginning of the line. If your JavaScript code does what you want you can move it's logic into your template file.
What is the best practice here?
Using Jade.
It's not clear what property is in your template file. If you expect Jade to know that it's a property of an array of objects this is not the case. You need to iterate through the array and then iterate through property array of each object element, i.e. 2 nested loops.
Assuming you have used things identifier for the array:
each thing, index in things
h2.sample= thing.important
each item in thing.property
p.propertyName= item.name
Note that IDs must be unique otherwise you have generated an invalid markup.

AngularJS - ngRepeat by $index weirdness

I am trying to implement an array (possible_parts) of objects and when an object is clicked add it to another array (warranty_parts). The trick is that the warranty_parts list can contain the same object more than once. I am using "track by $index" and everything works fine.
Then i need to inject another object (reason) to the selected part from warranty_part which I do with:
<select ng-model="selected_reason" ng-options="war.name for war in warranty_reasons"
ng-change="load_warranty_subreasons($index, part, selected_reason)">
And the function:
$scope.load_warranty_subreasons = function(index, part, reason){
part.selected_reason = reason;
}
But when I do this, all the parts in warranty_parts get the reason selected for the last part which means that I somehow append the reason to the all the parts. I tried to append it via $index:
$scope.warranty_parts[$index].selected_reason = reason;
But I end up with the same result. I also tried $apply, I tried to generate random string and insert it into the part object so the objects are different but I keep getting the same result- the reason is appended to all the parts and not the only one i want.
Anyone can help me with this? I also tried:
ng-repeat="part in warranty_parts track by $index(part)"
But then I get an error message: number in not a function.
Thanks!

jQuery Id Selection and Dynamic Arrays

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.