We Keep Coding

Update a field to be further nested in a document - MongoDB/Node

I am writing a migration with migrate-mongo and the Node driver for Mongo which both have not-so-great documentation. I am trying to take a field and nest it one level further. Here is an example of the original structure:
{
"_id": {"$oid":"xxxxxxxx"},
"module": "lalala",
"settings": {
"yAxis": {
"title": {
"text": "TITLE"
}
}
}
I would like to take the yAxis field and its contents and nest it under a "highcharts" field so it ends up like this:
"settings": {
"highcharts": {
"yAxis": {
"title": {
"text": "TITLE"
}
}
}
}
I saw this Update field with value from a nested field and was hoping I could use that $ operator to just take the yAxis contents and stick them back in but that isn't working. (The yAxis field now just reads the string literal '$settings.yAxis')
async up(db) {
const panels = db.collection('panels');
await panels.updateMany({module: 'lalala'},
{$set: {'settings.highcharts.yAxis': '$settings.yAxis'}});
await panels.updateMany({module: 'lalala'},
{$unset: {'settings.yAxis': ''}});
I also thought maybe I should iterate through the documents, parse them as JSON and grab the contents of yAxis, and insert that into a new 'highcharts' field, but that's using await in a forEach which doesn't work.
I ideally am doing this async so that I can do multiple operations in a single migration. Otherwise I would have to set the new 'highcharts' field in one migration and unset the old 'yAxis' in a different migration which could lead to problems if one fails but the other doesn't.
Somewhat stuck here, anything helps. Thanks!

OK I was close and I dont understand why, but putting brackets around my $set was what I needed.
await panels.updateMany({module: 'lalala'},
[ {$set: {'settings.highcharts.yAxis': '$settings.yAxis'}} ] );

How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local

POST for Twitter Typeahead
I have been for 2 days now, trying to understand and have a clear picture on how to use /manage typeahead.js 0.10 in order to use local, remote and fetched data.
Honestly, the bloodhound engine is not clear for me and detailed information on how to manipulate / access json objects and arrays is still a question mark.
I can make the local example to work but anytime I try to use the prefetch or remote options, and besides several ticks, I cannot make to work.
My goal with this post is not to just get an answer to my problem but rather find someone that has the complete knowledge of it and that is able to, in a very simple way, explain step-by step (with examples / jsfiddles - including json examples, to know what actually is being parsed) how this thing works.
I think a lot a people is looking forward to understand it and this will be a great great contribution (as other detailed posts we know exist).
I imagine this is hard-work.
Thanks in advance for your contributors.
Following the suggestion below. My simple example.
JSON file
[
{ "name": "Pink Floyd",
"Album": "The Best Of Pink Floyd: A Foot In The Door",
"Label": "EMI UK",
"Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
"Price": "16.40",
"Genre": "Rock"
},
{
"name": "Depeche Mode",
"Album": "A Question Of Time",
"Label": "Mute",
"Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
"Price": "4.68" ,
"Genre": "Rock"
},
{
"name": "Placebo",
"Album": "Street Halo/Kindred",
"Label": "Hyperdub Japan",
"Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
"Price": "14.06",
"Genre": "Future Garage"
}
]
Typeahead script
<script>
var products = new Bloodhound({
datumTokenizer: function(d) {return d.name; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'http://localhost/dh/js/products.json'
});
products.initialize();
$('.test1').typeahead({
highlight: true
},
{
name: 'products',
displayKey: 'num',
source: states.ttAdapter()
});
</script>
HTML
<script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>
<div class="search_content">
<input class="test1" type="text" placeholder="product">
</div>

I just spent some days trying to get this to work my self, and I totally agree that its not intuitive. In particular there was one thing on the typeahead page about Bloodhound that try as I might just didn't work. For example the following line:
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') -- would always yield an error because obj didnt exist.
For the datumTokenizer use the following form(where "DisplayText" is the name of the property in your object that contains the text that will be displayed):
function (d) {
return Bloodhound.tokenizers.whitespace(d.DisplayText);
}
and remember when you create the typeahead set the displayKey to the name of the property in your collection that has the text data you want to display. For me this was always the same as the property I wanted to tokenize - so my typeahead statement looked like the following:
$('#my-typeahead').typeahead({
hint: true,
highlight: true,
minLength: 3
},
{
name: 'someName',
displayKey: 'DisplayText',
source: myBloodhound.ttAdapter()
}

change to:
source : products.ttAdapter()

The accepted answer, although correct at its time, is not of much use given that typeahead 0.10 is long outdated. Current version is 1.2.1 (as of 2018)
So answering the original question,
Here's a reference tutorial that has step by step explanation of using Typeahead with Bloodhound (local, prefetch, remote and a combination of these) with JS fiddles based on the still maintained fork - Typeahead v1.2.1

Dojo DataGrid Virtual Scrolling How-To?

I've been digging around for this one quite a bit. I'm using dojox.grid.datagrid and I have an ajax call that brings back 200-300 rows.
The grid renders and scrolls just fine in Chrome but scrolling is excruciatingly slow in IE 7 and 8. I'd like to use virtual scrolling to try and remedy the issue but can't find any sample code.
Here's what my code looks like at present.
function setupAvailableScenes(location) {
var avaiableScenesGridPane = dijit.byId("AvaiableScenesGridPane");
var availableScenesGrid = dijit.byId("AvailableScenesGrid");
if (_isFirstLoad) {
availableScenesGrid = new dojox.grid.DataGrid({
id: 'AvailableScenesGrid',
store: availableScenesStore,
query: { Id: "*" },
sortInfo: "1",
rowsPerPage: 20,
autoHeight:20,
style: "width:315px",
structure: [
{ name: "Available Scenes", field: "Name", width: "85%" },
{ name: " ",
field: "_item",
rowsPerPage: "25",
type: dojox.grid.cells._Widget,
editable: false,
width: "15%",
formatter: function (scene) {
return new dijit.form.Button(
{
label: "+",
onClick: function () {
AddSceneToSelectedScenes(scene);
}
})
}
}
]
});
avaiableScenesGridPane.set('content', availableScenesGrid);
}
var availableScenesStore = new dojo.data.ItemFileWriteStore({
url: _applicationPath + "/Location/" + location.Id + "/Scene.json",
preventUrlCache: true
});
availableScenesGrid.setStore(availableScenesStore);
}

Often one of the biggest things you can do to improve DataGrid performance is to throw away the ItemFileReadStore/WriteStore and use an optimized data store (personally I like QueryReadStore). It would mean needing a server-side servlet of some kind (PHP/JSP/etc) to handle the virtual scrolling/pagination, but I've seen major perf boosts over just using a store backed by a JSON file.
Some other things to consider, which may or may not help:
give your anonymous formatter function a name and try scrolling the table with the Chrome or Firebug profiles turned on to see if it's hogging a lot of cycles (or, like Vijay Agrawal said, you could try replacing the dijit.form.Button with a vanilla html <button> tag)
you shouldn't actually need to specify the dojox.grid.cells._Widget type for that cell; having a custom formatter returning a valid Dijit should be sufficient to make the Grid do the right thing.

Since you specified rowsPerPage=25, it is already doing virtual scrolling (it pulls the new set of rows only when user scrolls down)
Since you mention scrolling is very slow, the performance issue seems to be around rendering the new rows - you may try a couple things to improve performance:
1) remove autoHeight attribute. Instead, specify a fixed height in the style attribute
2) in the formatter function, instead of returning a dijit, try returning a simple html button/anchor styled as button
so remove the type:dojox.grid.cells._Widget attribute and in the format function return the html you want to use

Change JavaScript object values with auto-generated HTML form

I have got a 'big' JavaScript object that looks somewhat like this:
var userConfig = {
active: true,
subElement: { someProp: 156, otherProp: 'yaye' },
foo: ['bar', 'see', 'no']
// etc
}
What I'm looking for is some sort of framework that I pass the variable (or a part of the variable) to and that reads all properties and creates a form where these can be configured. So a checkbox would be created for a boolean, a textbox for a string etc...
Anyone knows about such a library?
Update: At the moment settings are changed by opening the JS and editting the variables manually (The JS is a locally stored greasemonkey script). Pretty much anything beats that really.
I'm not interested in writing (alot of) code to do two way binding, creating all the UI widgets and having a clean seperation of concerns (MVVM, MVP, ...) which is what Knockout/Backbone/... does (judging from the tutorials).
Instead:
var userConfigUpdater = {
active: { description: "Activates or deactivates feature X", editType: "boolean"},
subElement: {
description: "subElement",
editType: "tabularItem",
someProp: {description: "foo", editType: "text"},
// more
}
}
createHtmlWidgets(userConfig, userConfigUpdater);
Now the user can edit the form elements and then we have something like:
$("#okButton").click(function() {userConfig = getUpdatedValues();});
Granted, it doesn't look very nice, but it would get the job done quite fast/easily. I'm guessing there is not yet some public framework that does something like this?

The closest thing I know is knockoutjs. This doesn't do exactly what you want but what it does do is allow a mechanism for keeping that object in the knockout world it would be called a viewModel in sync with your form so if you update the form contents it would update that object's data automatically and vice-versa

I ended up writing my own 'framework'.
It is 'pretty' generic but somewhat integrated into the rest of my project, really limited in features and the API is not very clean. Use at your own risk :)
The source code on GitHub. The 'framework' is propui.js and sangu_config.js is the configuration for propui.
Example how to call the API:
backgroundColor: {
label: "Change the background color",
propUI: {
getter: function() { return settings.backgroundColor; },
setter: function(value) { settings.backgroundColor = value; },
editor: "bool"
}
},

Using fullcalendar with javascript, how to modify a parameters list and refetch?

I'm using fullcalendar to show events to be filled.
In my team, I have 2 people. Mike and Claire. I'm the Boss.
If Mike or Claire log in to my page they can only see their own Events.
If I log to the same app I can choose the events to see: Mike's, Claire's, all of them or only mine.
To do that I'll choose the correct value from a Combobox (Mike's, Claire's, Mine, All of them). After I change that combovalue I have to refetch events according to my selected option.
Actually my fullcalendar is configured with:
events: "../controller.php",
dparams : {
"pg":"getAgendaCalendarView",
"profile": "undefined",
"query": "*"
},
And under my combo I have something like:
listeners: {
'change' : function(objThis, newValue, oldValue){
$('#cw_tbcalendar').fullCalendar('refetchEvents');
}
My main question is, how can I modify the parameters list to show my selected value?

Have you considered using ExtJS's calender? (tagged with extjs)
In reply to the question, might this be your solution?
var config = {
events: "controller.php",
dparams: {
"pg": "getAgendaCalendarView",
"profile": "undefined",
"query": "*"
}
};
$('#calendar').fullCalendar(config);
$('#my_combo').change(function() {
config.dparams.query = $(this).value();
$('#calendar').fullCalendar(config);
});