I have a long array with multiple items per object and I have to start to exclude items depending on what someone selects as a check box, you can see a basic idea working here
http://jsfiddle.net/caseybecking/QwtFY/
My question is how do I start to narrow the list without having to do a check on how man y items they have checked, also this doesn't work if they check multiple items per "Fit" or "Wash"
To elaborate further my objectives. I need to store object(s) that only contain the specific item(s) the user wants to FILTER down to. All this is is a ginat filter of multiple pieces of a long array.
Sounds like you want something like .serialize() or .serializeArray() -- then you can send this data to your server or use the serialized array to filter the json object. You'll need to make sure each input element has a name attribute. In the below fiddle I've removed the hideous boxChecked function as haven't a clue what your trying to achieve in that. Anyway:
Fiddle: http://jsfiddle.net/zZtyy/
Related
I am creating a ReactJS app. The app has over 100,000 entities on screen which I am plotting using WebGL. The properties of these entirties are stored in a JSON/Dict type object. Whenever a user applies a filter, I need to go through the values, compare the properties, and select the ID (type UUID4) of those not matching the filter, so that I can turn their Visibility to False in the WebGL container.
I am presently using an Array of the following type :-
spriteProps = [ {id: xxxx-...-xxxx, color: Blue, Length: 10, points:50},
{id: yyyy-...-yyyy, color:Red, Length:25, points:112},
.....
]
The user may want to see all entities which are Blue in color and have a length less than 100. So I have to iterate through each value and check which values match the filter.
However, this is very slow.
What is the best data structure to use in this situation to get the best performance? Is there any JS library I can use to improve performance?
Thanks.
https://www.ag-grid.com/react-getting-started/
Ag-grid is a good library that will help you implement what you are looking for.
I have used it with data that was an array of objects and the dataset was very large. It should fit your needs perfectly.
Sorting and searching works seamlessly. Your properties will be the column headings and you can sort and filter based on columns. Selecting rows and pinning specific rows is also possible.
Basically in this use case you need to filter from large set of data.
Cross filter is very good option. Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.
https://github.com/crossfilter/crossfilter
You can try the following binary search approach.
Choose any property likely to be used in the filtering criteria. I'm choosinglength here. When user applies filters and if length isn't used as a filter, then fallback to simply iterating the array in sequence.
When data is available, sort the array in ascending or descending order based on length property.
When user applies filters, perform a binary search to find the index above or below which all elements are within the given length.
Iterate on the section of the array containing elements within given length and turn visibility off for elements with different color property.
Then iterate on other section of the array containing elements greater than given length and turn visibility off for all these elements.
We can see that we are visiting every element in the array. So, this approach isn't any better than visiting each element in the array sequentially.
If all the elements have visibility off at the beginning and if we have to turn visibility on for selected elements, then we can avoid visiting the second section of the array (point 4), and this binary search approach will be useful in such case.
But since it isn't the case, we have to visit every element in the array and therefore time complexity couldn't get better than linear time O(n).
I have a HTML page where I can create lists from a javascript. It saves the data in JSON. To the list there is also a javascript, which makes it possible to drag and sort the list items if you want to do so. All the javascripts are independent of each other.
My problem is that I don't know how I should index these list items in the order they have been placed, and afterwards send it to the database. Of course all this should happen on the client before sending it to database.
Remember this question is ONLY about storing the right index number in each list item; in the right order. If I would change the order of a list item, the index number should change too, so it will be saved in the right order.
You can iterate over the collection just before saving them and assign the current values.
I did this with a menu I built once. In jQuery I did something like this:
$("#mylist li").each(function(inx){
$(this).attr('index',inx);
});
Then, when you save them, include the index attribute so you know the final order.
EDIT: per comment by #Boaz
I use telerik radGriD funcrion on javascript client-side:
getGridMasterTableView().get_filterExpressions().clear(); - clear array of filter expression.
getGridMasterTableView().filter(fieldName, strData, GetExpressionValue(fieldExpression)); - add elenent in array filter expression.
when I call this getGridMasterTableView().filter(fieldName, strData, GetExpressionValue(fieldExpression)) method two times, when fieldName allways the same, the method getGridMasterTableView().get_filterExpressions() in watch shows that it simply rewrites element but I need that it add new element. How resolve it?
Are you attempting to apply two filters on the same column? From the sound of things you are filtering once, and then trying to filter that same result once more. You can only have one filter on a column at a time, so when you call the filter() method the second time it just removes the old filter and filters according to the last filter() call.
For more information regarding client-side filtering I recommend looking over this documentation article.
I have a table of rows and columns on an HTML-based entry form that allows the user to edit multiple records. Each row corresponds to a database record and each column to a database field.
When the user submits the form, the server needs to figure out which request parameter belongs to which row. The method I've been using for years is to prefix or suffix each HTML input element's name to indicate the row it belongs to. For example, all input elements would have the suffix "row1" so that the server would know that request parameters whose names end with "row1" are field values for the first row.
While this works, one caveat of the suffix/prefix approach is that you're adding a constraint that you can't name any other elements with a particular suffix/prefix. So I wonder if there's a better, more elegant approach. I'm using JSP for the presentation layer, by the way.
Thanks.
I don't know JSP very well, but in PHP you would define your input fields' names with an array syntax.
<input name='person[]'>
<input name='person[]'>
<input name='person[]'>
When PHP receives a form like that, it gives you an array (within the standard $_POST array), thus:
$_POST['person']=array('alice','bob','charlie');
Which makes it very easy to deal with having as many sets of fields as you want.
You can also explicitly name the array elements:
<input name='person[teamleader]'>
<input name='person[developer1]'>
would give you an array with those keys. If your current prefixes are meaningful beyond simply numbering the records, this would solve that problem.
I don't know whether the identical syntax would work for JSP, but I imagine it would allow something very similar.
Hope that helps.
Current user agents send back the values in the order of the fields as presented to the user.
This means that you could (theoretically) drop the prefix/suffix altogether and sort it out based on the ordering of the values. You'd get something like
/?name=Tom&gender=M&name=Jane&gender=F&name=Roger&gender=M
I don't know how your framework returns that, but many return it as lists of each value
name = [Tom, Jane, Roger]
gender = [M, F, M]
If you pop an element off of each list, you should get a related set that you can work with.
The downside to this is that it relies on a standard behavior which is not actually required by the specification. Still... it's a convenient solution with a behavior that won't be problematic in practice.
When browsers POST that information back to the server, it is just a list of parameters:
?name_row1=Jeff&browser_row1=Chrome&name_row2=Mark&browser_row2=IE8
So really, I think you can answer a simpler question: how do you relate keys in a key-value list?
Alternatively, you can go to a more structured delivery method (JSON or XML), which will automatically give you a structured data format. Of course, this means you'll need to build this value on the browser first, then send it via AJAX (or via the value of a hidden input field) and then unpack/deserialize it in the server code.
XML:
<rows>
<row><id>1</id><name>Jeff</name><browser>Chrome</browser></row>
<row>...</row>
</rows>
or JSON:
[{ "name":"Jeff", "browser":"Chrome"}, { "name":"Mark", "browser":"IE8" }]
There are many resources/tutorials on how to do this... Google it. Or go with the ostensible StackOverflow consensus and try jQuery.
I have an ajax function which call a servlet to get list of products from various webservices, the number of products can go up to 100,000. I need to show this list in a html table.
I am trying to provide users an interface to filter this list based on several criteria. Currently I am using a simple jQuery plugin to achieve this, but I found it to hog memory and time.
The Javascript that I use basically uses regex to search and filter rows matching the filtering criteria.
I was thinking of an alternate solution wherein I filter the JSON array returned by my servlet and bind the html table to it. Is there a way to achieve this, if there is, then is it more efficient than the regex approach.
Going through up to 100,000 items and checking if they meet your criteria is going to take a while, especially if the criteria might be complex (must be CONDO with 2 OR 3 bedrooms NOT in zip code 12345 and FIREPLACE but not JACUZZI).
Perhaps your servlet could cache the data for the 100,000 items and it could do the filtering, based on criteria posted by the user's browser. It could return, say, "items 1-50 of 12,456 selected from 100,000" and let the user page forward to the next 50 or so, and even select how many items to get back (25, 50, all).
If they select "all" before narrowing down the number very far, then a halfway observant user will expect it to take a while to load.
In other words, don't even TRY to manage the 100,000 items in the browser, let the server do it.
User enters filter and hits
search.
Ajax call to database, database has indexes on appropriate
columns and the database does the filtering.
Database returns result
Show result in table. (Probably want it to be paged to
only show 100-1000 rows at a time
because 100,000 rows in a table can
really slow down your browser.
Edit: Since you don't have a database, the best you're going to be able to do is run the regex over the JSON dataset and add results that match to the table. You'll want to save the JSON dataset in a variable in case they change the search. (I'm assuming that right now you're adding everything to the table and then using the jquery table plugin to filter it)
I'm assuming that by filtering you mean only displaying a subset of the data; and not sorting.
As you are populating the data into the table add classes to each row for everything in that row you want to filter by. e.g.:
<tr class="filter1 filter2 filter3">....
<tr class="filter1 filter3">....
<tr class="filter2">....
<tr class="filter3">....
Then when you want to apply a filter you can do something like:
$('TR:not(.filter1)').hide();
I agree with Berry that 100000 rows in the browser is bit of a stretch, but if there's anything that comes close to handling something of that magnitude then it's jOrder. http://github.com/danstocker/jorder
Create a jOrder table based on your JSON, and add the most necessary indexes. I mean the ones that you must at all cost filter by.
E.g. you have a "Name" field with people's names.
var table = jOrder(json)
.index('name', ['Name'], { sorted: true, ordered: true });
Then, for instance, this is how you select the records where the Name field starts with "John":
var filtered = table.where([{ Name: 'John' }], { mode: jOrder.startof, renumber: true });
Later, if you need paging in your table, just feed the table builder a filtered.slice(...).
If you're getting back xml, you could just use jQuery selection
$('.class', context) where context is your xml response.
From this selection, you could just write the xml to the page and use CSS to style it. That's where I'd start at first, at least. I'm doing something similar in one of my applications, but my dataset is smaller.
I don't know what you mean by "bind"? You can parse JSON and then use for loop (or $.each()) to populate ether straight HTML or by using grid plugin's insert/add