AngularJS: is $$hashkey a reliable key - javascript

Question
I'm interested in the properties of $$hashkey on angular arrays/objects.
Would each generated hashkey be the same each time you reload a
page; a quick test tells me yes but I somewhat assumed it
wouldn't?
If you updated/added to the existing array, would the old hashkey's
stay consistent?
If the above is true, is there a way to fetch from an array using
the hashkey? - of cause I could roll my own but before I recreate the wheel I thought I'd ask.
Example:
Views would include:
form data (example has 1 form)
element data (example has 2 elements)
element options data (example has 2 options per element)
Fetch method:
angular.get($$hashkey);
You would then pass the hashkey of the element and it would return a reference to that array inside the full array.
Lastly the data would be:
{
form_id: 1
form_desc: 'xxx',
form_name: 'name 1',
Elements: [
{
element_id: 1,
element_name: 'element1',
default_value: null,
disabled: "0",
element_type: "image",
ElementOptions: [
{
show: false,
sort_order: 0,
value: "ar",
},
{
show: true,
sort_order: 1,
value: "rw",
}
],
},
{
element_id: 2,
element_name: 'element2',
default_value: null,
disabled: "0",
element_type: "image",
ElementOptions: [
{
show: false,
sort_order: 0,
value: "ar",
},
{
show: true,
sort_order: 1,
value: "rw",
}
],
}
]
}

$$hashkeys will only be computed for functions and objects so if you wish to track anything that isn't one of those types then you have that limitation.
$$Hashkeys look like ...
(function||object): N
...
Where N is just an incremental value being adjusted + 1 for each $$HashKey computed.
So, in many cases this could be the same value across page loads. But loading data that is asynch, will cause differences when multiple data sources are being queried as part of page initialization and order of return cannot be guranteed. In cases like that you would have to marshall all your asynch data and then assign that data to your scope in a specific order to ensure consistent $$hashkeys.
Moving items around in an array that is linked to our DOM (via ng-repeat) will not change that items $$hashkey. Deleting it and re-adding it will.
I would not use $$Hashkey for my own housekeeping as it is intended to be internal to AngularJS.

I've used this internal private property when I had no identifiers.
I think, it's pretty usable, but not recommended.

Related

Best method to keep track of a users progression through reading sections of text

Similar to zyBooks if you are familiar with it, I want to track the sections the user has read through and checked completed with a button.
However, conceptually I am having trouble thinking of what to store in my mongo database, besides just an object or an array of objects that contains each section and bool values, to track their progress. A section will have around 10 subsections. But there will be around 8 sections total. So a total of 80 subsections to keep track of.
This is what I was thinking of but it seems inefficient.
const sectionArray = [
{
section: "1",
completed: false,
subsections: [
{
name: "1.1",
completed: false,
},
{
name: "1.2",
completed: false,
},
{
name: "1.3",
completed: false,
},
],
},
{
section: "2",
completed: false,
subsections: [
{
name: "2.1",
completed: false,
},
{
name: "2.2",
completed: false,
},
{
name: "2.3",
completed: false,
},
],
},
...
];
I will also display a section and its subsections content depending on which the user decides to view using react and material ui.
I do not want to commit to my method if there is a better alternative.
I think your approach is totally fine with that amount of data.
The question is, what do you mean with "inefficient" ?
From a performance point of view, 80 elements are just no problem. Maybe you just don't feel well with handling that code (which is a valid reason).
An alternative would be:
const sectionArray = [
{ section: "1", completed: false },
{ section: "1.1", completed: false },
{ section: "1.2", completed: false },
]
or (quicker access of the sections, e.g. without a .find()):
const sectionCollection = {
"1": false,
"1.1": false,
"1.2": false,
]
Maybe you don't need to store the main sections, if they are implicitly done when all sub sections are done ?
const sectionCollection = {
"1.1": false, // "1" is implicitly done if all "1.x" are done
"1.2": false,
]
Probably not an appropriate alternative (would be more efficient if most items are likely always false):
const sectionArray = [ "1", "1.3", "3.2" ] // 1, 1.3, 3.2 are 'true', all others are 'false'
Just for fun: You might also use integers as section IDs (which is ridiculously over optimizing on the wrong end):
const sectionCollection = [ 100, 103, 302 ] // list of integers
const sectionCollection = [ 0x10, 0x13, 0x32 ] // using hex or bin
const sectionCollection = { [100]: false, [101]: true } // integer keys
And then even store a Byte array instead of JSON.

IgGrid selectRow Issue

I am trying to implement the "RowSelectors" feature on the iggrid, but it will not change to a the next row.
On further inspection, i have got the selected row method and each row shows the same id. I am returning my data via ajax, if i use static json in a variable and use that as a datasource, it works as expected so not sure what the issue is..
$("#selector").igGrid("selectedRow");
I can only acheive a row change when holding control and clicking..
Object {element: n.fn.init(1), index: 0, id: 3407751001}
then next row is
Object {element: n.fn.init(1), index: 1, id: 3407751001}
Settings..
features: [
{
name: "Sorting",
columnSettings: [
{
columnIndex: 4,
allowSorting: true,
firstSortDirection: "ascending",
currentSortDirection: "descending"
}
]
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (ui, args) {
return false;
},
multipleSelection: true,
rowSelectorClicked: function (evt, ui) {
// Handle event
},
},
{
name: 'Selection'
}
]
The issue is already resolved, but I'm adding the answer so it doesn't stay unanswered.
The primaryKey column the igGrid uses needs to be a column with unique identifiers for each record.

Javascript library for table rendering

I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.
Is there a JS library that could do this, so I dont have to write this from scratch?
Please see the attached image with the JSON object.
When the user clicks on Ana, additional row is inserted.
I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like
after the user clicks on the "+" icon in the second line.
The corresponding code you can find below
var mydata = [
{ id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
{ id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
];
$("#grid").jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Name" },
{ name: "lname", label: "Last name" },
{ name: "age", label: "Age", template: "integer", align: "center" }
],
cmTemplate: { align: "center", width: 150 },
sortname: "age",
iconSet: "fontAwesome",
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "location", label: "Localtion" },
{ name: "city", label: "City" },
{ name: "country", label: "Country" }
],
cmTemplate: { align: "center" },
iconSet: "fontAwesome",
autowidth: true
});
}
});
Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.
The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.
If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following
subGridRowExpanded: function (subgridDivId) {
$("#" + subgridDivId).html("<em>simple subgrid data</em>");
}
to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and
then convert the table to the subgrid.
To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.
You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.
I use datatables.net for all my "more complex than lists"-tables. I It's a very well kept library with loads of features and great flexibility.
In the "con" column I would say that it's so complex that it probably has quite a steep learning curve. Although the documentation is great so there is always hope for most problems.

How can I index child object properties in an array using ydn-db-fulltext?

I'm using Ydn-Db-Fulltext to allow users to search a local database of contacts in an HTML5 app. So far, when it comes to searching for names of people, it works great, is smart, and returns results instantly.
Here's an example of a contact object that contains an array of contact Methods:
{
"source": "COMPANY",
"ownerPin": "12345",
"name": "brian wilkins",
"dateUpdated": "2014-03-18T14:41:05.217Z",
"dateAdded": "2014-03-18T14:41:05.217Z",
"isFavorite": false,
"socialId": "54321",
"id": "1",
"deleted": false,
"edited": false,
"favorite": false,
"contactMethods": [
{
"id": "4321",
"contactKey": "12321",
"contactId": "1",
"value": "brian.wilkins#geemail.com",
"kind": "email",
"ownerPin": "12345",
"isPrimary": false
},
{
"id": "5432",
"contactKey": "2",
"contactId": "1",
"kind": "phone",
"ownerPin": "12345",
"isPrimary": false
},
{
"id": "23",
"contactKey": "333",
"contactId": "1",
"value": "112345",
"kind": "extension",
"ownerPin": "12345",
"isPrimary": false
}
]
}
To create the index on the "name" property, I setup the fullTextCatalog as follows:
fullTextCatalogs: [{
name: 'name',
lang: 'en',
sources: [
{
storeName: 'contacts',
keyPath: 'id',
weight: 1.0
}, {
storeName: 'contacts',
keyPath: 'name',
weight: 0.5
}
]
}],
stores: [
{
name: 'contacts',
keyPath: 'id',
autoIncrement: true
}
]
};
this.db = new ydn.db.Storage('thedatabase', db_schema);
I can search by name or by id (the key) and get a list of contacts that match. Little appears to be stored in memory. Every search queries the local backing indexedDB database.
The challenge is that I also want to be able to search based on email address and extension, which are stored in the contactMethods property inside an array of contactMethods. The "value" property is where we store the email address and/or extension depending on the contactMethod type.
I tried adding contactMethods as a secondary searchable object store, but this resulted in searches for "Brian" returning two results, both the contact containing the name, and the contactMethod containing the email address. Ideally, I'd want to take the contactId (foreign key to the contact) and use it to pull the actual contact object, but it seems like this could create very expensive overhead and negate the benefits of this great search tool.
Is there a way to index object properties that are not at the parent level? How can I approach this in a way that would scale and not eat up all of the resources?
this.db.get(entry.storeName, entry.primaryKey).done(function(x) {
this.textContent += ' [Full name: ' + x.name + ']'; // this is in the contact
this.textContent += ' [email: ' + x.value + ']'; // but this is in the contactMethod
}, span);
Is there a way to index object properties that are not at the parent level?
keyPath can refer to deep object property by using dotted notation. For example, you could specify contactMethods.value to index email, but unfortunately it does not work with array value - as in this case.
So, obvious choice is keeping contactMethods record in separate object store using parent-child relationship. Since ydn-db currently does not support embedded attribute in the schema, you will have to load all child records when loading parent object.
Alternatively, IndexedDB v2 may have virtual index generated by a function expression. You can use in ydn-db by generator in index schema, for example:
stores: [
{
name: 'contacts',
keyPath: 'id',
autoIncrement: true,
indexes: [{
name: '$emails',
multiEntry: true,
generator: function(record) {
return record.contactMethods.map(function(x) {return x.value};
})
}]
}
]
One thing to note though, the generated field $emails will appear when you load the data. It likely will be removed from the record so as to match with v2 spec.
We are using this generator index heavily in multiple projects, so I will fix bug.
Indexing id and email address in full text search is convenient, but does not make sense because phonetic base full text search will be index them as it is without normalization.

Programmatically Set Constructor Parameters in Javascript

I am trying to interact with a javascript api (bare in mind I have never done this before). An example of what I am attempting to work with is here:
SearchSpring.Catalog.init({
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
});
In the example I want to add a "backgroundFilter" to this with a value:
var cat="MyNewCategory";
cat.value="ANewValue;
How would I add this category and value to the backgroundFilters: listed above?
This is a very common framework initialization pattern when working with frameworks.
Your example code is passing a JavaScript Object {} as a parameter into a function () that is called init.
Taking out all definitions the pattern looks like this:
SomeFramework.frameworkFunction({});
In the above code the {} is an empty object used for initialization. There are two ways that you can work with that object in practice.
Regarding your first code snippet, you can add code into that 'object literal'.
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['My value']
},
Notice the added comma, this is an important tripping point. This may or may not fit your needs, depending on a few factors.
Regarding your second code snippet, you can apply members to JavaScript objects at runtime. What I mean is, your var cat can be added to the anonymous object-literal that is being passed in. Hard to say, but a simple concept. Here is how:
//Say this is initialized in some separate way. //There is a bug here I'll describe later.
var cat="MyNewCategory";
cat.value="ANewValue";
//Extract and name the initialization object. It is verbatim at this point.
var initObject = {
leaveInitialResults : true,
facets : '.leftNav',
results : '#results',
result_layout: 'list',
results_per_page : 12,
layout: 'top',
loadCSS: false,
filters: {
color: ['Blue']
},
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens']
},
maxFacets: 5,
maxFacetOptions: 10,
sortText: 'Sort By ',
sortType: 'dropdown',
filterText: 'Refine Search Results',
previousText: 'Previous',
scrollType: 'scroll',
scrollTo: 'body',
backgroundSortField: 'price',
backgroundSortDir: 'desc',
compareText: 'Compare Items',
summaryText: 'Current Filters',
showSummary: true,
subSearchText: 'Subsearch:',
showSubSearch: true,
forwardSingle: false,
afterResultsChange: function() { $('.pagination').hide(); },
filterData: function(data) { console.debug(data); }
};
//Now we can add variables (and functions) dynamically at runtime.
initObject.cat = cat;
//And pass them into the framework initialization in a separated way.
SearchSpring.Catalog.init(initObject);
Now for the bug. I don't know the solution because I do not know what it is intended to do, but I can point out what is potentially incorrect.
var cat="MyNewCategory";
cat.value="ANewValue;
This code is: 1 creating a String Object called cat. 2 changing the value to a new string.
I do not think this is what you really want.
To add a new backgroundFilter, in the separated way above, it would be:
initObject.backgroundFilters.cat = ['A', 'B'];
//Line above would give you this type of definition within the initObject (at runtime):
backgroundFilters: {
category: ['Shirt', 'Shoes'],
department: ['Mens'],
cat: ['A','B']
},
For this to work it will depend on what the framework is expecting regarding backgroundFilters.
Hope that helps.
All the best!
Nash
I don't quite understand - do you want to have the backgroundFilters categories as structured objects rather than plain strings? If you are in control of the entire API, you can do something like
...
backgroundFilters: {
category: [
new SearchSpring.Catalog.Category("Shirt"),
new SearchSpring.Catalog.Category("Shoes"),
new SearchSpring.Catalog.Category("MyNewCategory", "ANewValue")
],
department: 'Mens'
}
...

Categories