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
Related
I have a set of items in firebase realtime,
when i Retrieve data the old data appears at the first.
Already i tried
Firebase.database().ref().child('chains').orderByKey().startAt();
but the data didn't appear
I want upload new item and it appear at the first how do i do this?
this my code:
this my database
How do you determine which items is newer? Is there any child node containing timestamp? If yes then you should use orderByChild():
firebase.database().ref('chains').orderByChild('addedAt')
However this will sort by ascending order and hence oldest items will be retrieved first. If you are looking for latest 50 items then you can use limitToLast method and then reverse the order using Javascript:
firebase.database().ref('chains').orderByChild('addedAt').limitToLast(50)
If you are ordering them using the item keys then you can use orderByKey but to get items in descending order i.e. newest first, you'll have to use same logic with limitToLast.
I have an array in my localStorage, product_categories, which holds numerous objects which contain a string and a nested array of objects (the inner objects are the products that belong to each category).
Since Appery's support couldn't help me figure out how to query an array of objects based on an attribute belonging to each object - I just made each object (product) belong to an array and categorize the products based on which array index they were.
Anyway, I am now trying to map an array of objects to my page's collapsible block, which I have done previously - but with a response from the online database.
Now, I am using a SEPARATE service and all I want it to do is grab the array of objects from the localStorage and map it to a collapsible block, or even a grid or list item, so that each index in the array auto-creates a new item.
However, it has not worked for anything I have tried. I tried to map it to every possible item that can have arrays mapped to it, and when I load the page - the item actually disappears, almost as if the array being mapped to it has a length of 0.
But, when I inspect the page in Chrome and look at the localStorage variable that is being used to hold the array of objects (and in-turn mapped to the page), the variable clearly has an array of objects in the same format as other localStorage variables being mapped to the page from storage.
If it helps, I am using a GenericService for pulling the localStorage variables and mapping them to the page. I am not using a custom implementation - all the service does is 'ON SUCCESS - MAPPING' and maps the storage to the page. However, like I said, this isn't working.
Since I have been here for a while but never actually posted or anything, I don't have the rep to post the images that may help in solving my problem; with that in mind, here is the link to the original Appery.io support page which contains corresponding images: https://getsatisfaction.com/apperyio/topics/mapping-localstorage-array-to-collapsible-wont-work-removes-collapsible-item
StackOverflow, I would really appreciate your assistance as I always seem to run into a language barrier when working with Appery.io's support.
*EDIT Your revisions are not useful for my post, as they are changing localStorage to local storage - but in the case of Appery, localStorage is correct syntax.
var products = offlineProductList(); // grab the returned JSON array of products from the function offlineProductList()
var UniqueCats = $.unique(products.map(function (d) {
return d.category // this will return every distinct category
}));
var product_categories = []; // create empty array to hold each category object and its respective products
for(var i=0;i<UniqueCats.length;i++){
// for every unique category...
var category_products = []; // create array to hold products
for(var j=0;j<products.length;j++){
// run through list of products
if(products[j].category == UniqueCats[i]){
// if the product's category is the same as the current indexed unique category, add to array
category_products.push(products[j]);
}
}
var category = {"category":UniqueCats[i],"category_products":category_products}; // create object for the category
product_categories.push(category); // add object to the categorical array
}
localStorage.setItem('product_categories', JSON.stringify(product_categories));
Above is the code used to create the 'array of objects', and below is an image showing the mapping
array of objects mapping to an appery page element
I would give you more but SO won't allow me to with my rep. So if you ask for more I might just 404 myself
So I figured it out myself - Appery actually offers the option for mapping expressions on events like 'Page Load' (for pages/panels etc) and 'Click' (for buttons and similar elements), and I was succesfully able to map localStorage arrays to list, collapsible, and grid elements from there. I guess my GenericService was set up inproperly - but for future users having issues of just mapping something from Storage to the page - just link a mapping expression from an element's event.
I'm using Knockout-sortable to drag-and-drop/sort records in my table, but I've run into a problem. I have no clue how to keep track of the position in the sort index of an element. (I.e. element A, B and C appear in that order and have 1,2,3 as index respectively, but if B gets dropped above A the correct index would be 2,1,3)
Nothing in my code is custom: I just include knockout-sortable and it's plug and play. I usually always include a code snippet, but I don't feel that's useful. The only thing I know is that I'm probably gonna need a ko.computed(), but I have no idea what to fill it in with.
If you look at example http://jsfiddle.net/rniemeyer/Jr2rE/, you can see that the plug-in works by updating an observable array of data. Because of this, you don't have to keep track of the index value. The order of the records, technically, gives you all the information you need.
That being said, I ran into the same issue in last year. To solve my problem, I added a consecutively numbered index property to each object in my observable array. Then, when the sortable plug-in re-arranged the contents of the observable array, I just had to read out the new index property to know the sort order.
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/
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