Develop Reference

Knockout select bindings overwriting my predefined observable object

Hi i have a application which data is passed from one page to another with predefined data objects/arrays assigned to it, my issue is i can see the observableArray having a value and then it turns the SelectedPeople observable to undefined.
I have eliminated down to the data bind markup as when i remove that my observable array does not set anything to undefined.
Here is how i am binding my observables/observableArray to the elements.
<select data-bind="options: ObservableArray.People, value: ObservableArray.SelectedPeople, optionsText: 'Name'"></select>
ObservableArray.People = Observable Array of objects - works fine and renders all the dropdown options
ObservableArray.SelectedPeople = Observable
Both have the 'Name' object defined to match the optionsText. It works perfectly when selecting data from scratch but when i try have predefined data in it the Observable.SelectedPeople object keeps getting sent as undefined when it tries to load.
Basically my Observable.SelectedPeople has a object on that which should predefined the value of that select and the object 100% matches one of the dropdown ObservableArray.People options. I need it not to set Observable.SelectedPeople to undefined and populate the select box.
Can anyone see why this is happening.
Thanks

...and the object 100% matches one of the dropdown ObservableArray.People options.
This line makes me suspicious of whether you're using an actual reference to the object, or just an object that is similar.
For example, this will not work:
var options = [{ id: 1 }, { id: 2 }, { id: 3}];
var selectedOption = ko.observable({ id: 1 });
Knockout does not perform some sort of deepEquals comparison; if it sees a non-primitive, it does a reference check. options[0] !== { id: 1 }, so this initial selection is not valid.
The code below will work, because you're using an actual object from the array you use in your select element:
var options = [{ id: 1 }, { id: 2 }, { id: 3}];
var selectedOption = ko.observable(options[0]);

loading csv into nvd3 to make discrete bar chart

I have the following CSV file:
Fun,Stupid,Yes,No
50,-20,100,70
I'd like to load it into nvd3 to make a discrete bar chart. I know it's easy but it's taking me way to long to manipulate the data.
I've tried the following:
d3.csv("/path/to/file", function(data){
console.log(data);
});
and I get the following object which isn't working with nvd3:
[{Fun:50, Stupid: -20, Yes: 100, No: 70}]
Thanks.

nvd3 is expecting a fairly specific data form so you need to get your data into that form. The form that it is expecting is:
[
{
key: "totals",
values: []
}
];
Where the empty array is filled with the objects from d3.csv and note that nv is expecting the name of the array of your objects to be called values.
So the first step is to create an empty object like this:
var exampleData = [
{
key: "totals",
values: []
}
];
Then fill it with your data:
data.forEach(function (d){
d.value = +d.value
exampleData[0].values.push(d)
})
This all needs to be inside your d3.csv call.
To use this format you need to have your csv file organised into columns with your names in one column and your values in another like:
label, value
Fun, 50
Stupid, -20
And here's a link to a working example

Making a nested/hierarchical set of tables using D3

I have some data which I want to display in html tables using d3. My data is laid out like this:
var dataset = [
{
'name': 'foo',
'children': [
{
'var1': 'hello',
'var2': 87,
...
},
{...},
{...}
]
},
{
'name': 'bar',
'children': [
{
'var1': 'howdy',
...
},
{...},
]
},
{
// and so on...
}
]
Ultimately, I would like to have something similar in style/functionality to this example, where the user can click on the 'foo' row and see everything in the 'foo' group. But for now I'm struggling to display the data at all.
I've made a little jsfiddle to show where I am now. As you can see, I have so far been unsuccessful at showing any of the actual numbers from my data. Does anyone have any ideas on how I should go about this? Should I restructure dataset? Thank you
== EDIT ==
I must apologise for maybe being vague about what I'm trying to do. Here is a mock up of what I ultimately want to achieve, although I stress that this question is more about binding data than layout/transition stuff.

Here's what I would do: http://jsfiddle.net/j43Nb/
Looking at your data, it seems more appropriate to have one table per parent and one row per child, and not wrap the whole thing in one big table. If you really need one big table, just replace the div.section/h4 bits with another table/tr/td sequence.
The key to understanding how "child" objects become an array of cell data is in this bit at the end:
var cells = rows.selectAll('td')
.data(function(d) {
// return cell data as an array of prop values,
// ordered according to prop names in cols
return cols.map(function(prop) {
return d[prop];
})
});
where the field names in cols are used to build a corresponding array of cell values for each given row (child).

Data Binding to a specific item of an array in Angular

Given a data structure that contains an array of JavaScript objects, how can I bind a certain entry from that array to an input field using Angular?
The data structure looks like this:
$scope.data = {
name: 'Foo Bar',
fields: [
{field: "F1", value: "1F"},
{field: "F2", value: "2F"},
{field: "F3", value: "3F"}
]
};
The fields array contains several instances of the given structure, with each entry having both a field attribute and a value attribute.
How can I bind an input control to the value field attribute of the array entry with the field F1?
<input ng-model="???"/>
I know that I could bind all fields using an ng-repeat, but that's not what I want. The above data is just an example from a much larger list of fields, where I only want to bind a pre-defined subset of fields to controls on the screen. The subset is not based on the attributes in the array entries, but is known at design time of the page.
So for the above example, I would try to bind F1 to one input on the page, and F2 to another one. F3 would not be bound to a control.
I've seen examples where a function was used in the ng-model, but it doesn't seem to work with Angular 1.1.0.
Is there another clever way to bind the input field to a specific array entry?
Here's a fiddle that has an example, but does not work since it's trying to use function in the ng-model attribute: http://jsfiddle.net/nwinkler/cbnAU/4/
Update
Based on the recommendation below, this is what it should look like: http://jsfiddle.net/nwinkler/cbnAU/7/

I personally would reorganize the array in a way that field property of an entry of the array become the identifier of the object. Mhhh that sentence may sound strange. What I mean is the following:
$scope.data = {
name: 'F1',
fields: {
F1: {
value: "1F"
},
F2: {
value: "2F"
}
}
};
If you want to bind a the value dynamically and it's an easy and quick way to achieve it.
Here is your fiddle modified so that it words. http://jsfiddle.net/RZFm6/
I hope that helps

You can use an array of objects, just not an array of strings.
HTML:
<div ng-repeat="field in data.fields">
<input ng-model="field.val"/>
</div>
JS:
$scope.data = {
name: 'F1',
fields: [
{ val: "v1" },
{ val: "v2" }
]
};
I've updated #Flek's fiddle here: http://jsfiddle.net/RZFm6/6/
Edit: Sorry just read your question properly, you can still use an array with:
<label>Bound to F1:</label>
<input ng-model="data.fields[0].value"/>
though maybe stop and think. Is there going to be variable number of fields ? or are you making a predetermined number of fields ? Use an array in the former and an object for the latter.

One way to do it is to simply add the necessary references to the scope, like this:
$scope.fieldF1 = fieldValue('F1');
$scope.fieldF2 = fieldValue('F2');
And then use those references:
<input ng-model="fieldF1.value"/>
<input ng-model="fieldF2.value"/>
Fiddle: http://jsfiddle.net/cbnAU/5/
Note: I'm assuming that $scope.data is static, but if it happens to be dynamic you can always watch for changes on it and recalculate the references...

ComboBox.store.loadData can't load single-item array

I am using ExtJS 3.4 .
I have a structure with data for combobox like this:
var a = [[1,"text1"],[2,"text2"]]
I load it like this:
ComboBox.store.loadData(a);
But when I have only 1 item in the array
var a = [[1,"text1"]]
then it doesn't load at all. I've read that:
an Array : Arrays will be converted to a Ext.data.ArrayStore
internally, automatically generating field names to work with all data
components. 1-dimensional array : (e.g., ['Foo','Bar']) A
1-dimensional array will automatically be expanded (each array item
will be used for both the combo valueField and displayField)
2-dimensional array : (e.g., [['f','Foo'],['b','Bar']]) For a
multi-dimensional array, the value in index 0 of each item will be
assumed to be the combo valueField, while the value at index 1 is
assumed to be the combo displayField.
But that doesn't explain how do I load an array with one element. Or whatever, it shouldn't be necessary an array, the point is to load only one item. I've tried loading this:
Code:
[{id:1,text:"text1"}]
[[{id:1,text:"text1"}]]
{id:1,text:"text1"}
Even creating a custom ArrayStore:
Code:
var store = new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'Store1',
idProperty:"id",
fields: ["id","text"]);
ComboBox.store = store;
ComobBox.store.loadData([{id:1,text:"text1"}]);
But everything loads incorrectly . Either the combobox is empty, or it displays id instead of text.
I can see that if I lazily init the combo:
Code:
{"xtype":"combo","width":250,"fieldLabel":"my combo","value":31029,"forceSelection":true,"hiddenName":"ComboHiddenName","minChars":1,"triggerAction":"all","store":[[31029,"gdfs"]]}
then the array with one item will load successfully. At which properties of ComboBox.store should I look to configure them properly for a single-item array to be loaded correctly using loadData method?

ComboBox.store.loadData(var a); would not work for any data. It would raise exception Unexpected token var. Instead one should use ComboBox.store.loadData(a); without var

ComboBox.valueField = "id";
ComboBox.displayField = "text";
ComboBox.store = new Ext.data.ArrayStore({autoDestroy: true, fields: ["id", "text"]});