Develop Reference

Mapping a localStorage variable (an Array of Objects) refuses to work/causes item to disappear

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.

Parse - How do I query a Class and include another that points to it?

I have two classes - _User and Car. A _User will have a low/limited number of Cars that they own. Each Car has only ONE owner and thus an "owner" column that is a to the _User. When I got to the user's page, I want to see their _User info and all of their Cars. I would like to make one call, in Cloud Code if necessary.
Here is where I get confused. There are 3 ways I could do this -
In _User have a relationship column called "cars" that points to each individual Car. If so, how come I can't use the "include(cars)" function on a relation to include the Cars' data in my query?!!
_User.cars = relationship, Car.owner = _User(pointer)
Query the _User, and then query all Cars with (owner == _User.objectId) separately. This is two queries though.
_User.cars = null, Car.owner = _User(pointer)
In _User have a array of pointers column called "cars". Manually inject pointers to cars upon car creation. When querying the user I would use "include(cars)".
_User.cars = [Car(pointer)], Car.owner = _User(pointer)
What is your recommended way to do this and why? Which one is the fastest? The documentation just leaves me further confused.

I recommend you the 3rd option, and yes, you can ask to include an array. You even don't need to "manually inject" the pointers, you just need to add the objects into the array and they'll automatically be converted into pointers.

You've got the right ideas. Just to clarify them a bit:
A relation. User can have a relation column called cars. To get from user to car, there's a user query and then second query like user.relation("cars").query, on which you would .find().
What you might call a belongs_to pointer in Car. To get from user to car you'd have a query to get your user and you create a carQuery like carQuery.equalTo("user", user)
An array of pointers. For small-sized collections, this is superior to the relation, because you can aggressively load cars when querying user by saying include("cars") on a user query. Not sure if there's a second query under the covers - probably not if parse (mongo) is storing these as embedded.
But I wouldn't get too tied up over one or two queries. Using the promise forms of find() will keep your code nice and tidy. There probably is a small speed advantage to the array technique, which is good while the collection size is small (<100 is my rule of thumb).
It's easy to google (or I'll add here if you have a specific question) code examples for maintaining the relations and for getting from user->car or from car->user for each approach.

Firebase - Get All Data That Contains

I have a firebase model where each object looks like this:
done: boolean
|
tags: array
|
text: string
Each object's tag array can contain any number of strings.
How do I obtain all objects with a matching tag? For example, find all objects where the tag contains "email".

Many of the more common search scenarios, such as searching by attribute (as your tag array would contain) will be baked into Firebase as the API continues to expand.
In the mean time, it's certainly possible to grow your own. One approach, based on your question, would be to simply "index" the list of tags with a list of records that match:
/tags/$tag/record_ids...
Then to search for records containing a given tag, you just do a quick query against the tags list:
new Firebase('URL/tags/'+tagName).once('value', function(snap) {
var listOfRecordIds = snap.val();
});
This is a pretty common NoSQL mantra--put more effort into the initial write to make reads easy later. It's also a common denormalization approach (and one most SQL database use internally, on a much more sophisticated level).
Also see the post Frank mentioned as that will help you expand into more advanced search topics.

Assigning ajaxed data into paginated data, and best way to go about it?

So, I am asking about how to create the appropriate concept/solution for a problem I have coming up. I am pretty sure I an cover it, but after talking with some on here, I see there are more than one way to skin a cat, and more often - better. lol.
So, I have some data coming in.. via ajax call. Ok great. That all gets bundled in a basket that I think create page paginations.
For instance, I get a bucket of 4 items, and my pagination is 2 per page.. equals 2 pages. I only build the pages one pagination is clicked.. I have the data, but then I build it out. (for the sake of the example below).
So here is my issue. I have a second set of data that i must retrieve (it is a seperate ajax call) and that second set of data might append additional data to the first set of items.
How best to map that second set to the first even when their display is not built yet.
So, - for the sake of argument, I have my first set of data that i just received. Lets say there is only 2 items per page.
In total, my first bucket has the following data:
data = [
{name:ITEM1, desc: Greatest Book in History, id: 98987 },
{name:ITEM2, desc: Second Greatest Book in History, id: 76557 },
{name:ITEM3, desc: Third Greatest Book in History, id: 121212 },
{name:ITEM4, desc: Fourth Greatest Book in History, id: 09546 }
]
page one.
ITEM 1 - Greatest Book in history
ITEM 2 - Second Greatest Book in history
Page 2 pagination is clicked
ITEM 3 - Third Book in history (**special sale: Special Edition**)
ITEM 4 - Fourth Greatest Book in history
Now, my second second data has the following
specialData = [
{121212 : special sale: Special Edition}
]
So, the second ajax call is gonna send all my First Bucket IDS and get returned any "new" information that is available. If there is, I am gonna append the display with the new data.
Now, my guess to do this is:
1). Wait for the second request to finish then append the first bucket data with the second set of info, so when I build out the pagination, the data is there gets build as pagination is requested.
or
2). Build the first bucket of data as normal and then apply an * element id * that is the same as the item id number.... and when the second data bucket is fetched, I append to the html element id with the new info.. that is how I find the appropriate match. THe only thing is, I have to know that that particular element ID dom item is present (visible/built to the current pagination page) before I can append that new info.
<div>ITEM 3 - Third Book in history<span id="121212"></span></div>
What am I missing here? Is this simpler than I am making it?

I'd probably go with the second approach for both cleanliness and the nature of the data structures provided by JavaScript. Given you've tagged the question with jQuery, here is an implementation.
var dataBucket = {};
function enrichBucket(incomingData) {
for(var i = 0, len = incomingData.length; i < len; i++) {
var dataEntry = incomingData[i];
dataBucket[dataEntry.id] = $.extend( dataBucket[dataEntry.id]||{}, dataEntry);
}
}
http://api.jquery.com/jQuery.extend/ Check out the [deep] flag if you want to do a deep merge.

How to create efficient map system?

i have a map system (grid) for my website. I have defined 40000 'fields' on a grid. Each field has a XY value (for x(1-200) and y(1-200)) and a unique identifier: fieldid(1-40000).
I have a viewable area of 16x9 fields. When the user visits website.com/fieldid/422 it displays 16x9 fields starting with fieldid 422 in the upperleft corner. This obviously follows the XY system, which means the field in the second row, right below #422 is #622.
The user should be able to navigate Up, Down, Left and Right (meaning increment/decrement the X or Y value accordingly). I have a function which converts XY values to fieldids and vice-versa.
Everything good so far, I can:
Reload the entire page when a user clicks a navigate button (got this)
Send an ajax-request and get a jsonstring with the new 16x9 fields (got this)
But I want to build in some sort of caching system so that the data sent back from the server can be minimized after the first load. This would probably mean only sending new 'rows' or 'columns' of fields and storing them in somesort of javascript multidimensional array bigger then the 16x9 used for displaying. But I can't figure it out. Can somebody assist?

I see two possible solutions.
1 If you use ajax to get new tiles and do not reload entire page very often, you may just use an object that holds the contents of each tile, using unique tile ids as keys, like:
var mapCache = {
'1' : "tile 1 data",
'2' : "tile 2 data"
//etc.
}
When the user request new tiles, first check if you have them in your object (you know which tiles will be needed for given area), then download only what you need and add new key/value pairs to the cache. Obviously all cached data will disappear as soon as the page is reloaded by user.
2 If you reload the page for each request you might split your tiles into separate javascript "files". It doesn't really matter how it would be implemented on the server - static files like tile1.js, tile2.js etc, or dynamic script (probably with some server-side cache) like tile.php?id=1, tile.php?id=2 etc. What's important is that the server sends proper HTTP headers and makes it possible for the browser to cache these requests. So when a page containing some 144 tiles is requested you have 144 <script /> elements, each one containing data for one tile and each one will be stored in browser's cache. This solution makes sense only if there's lot of data for each tile and data doesn't change on the server very often, or/and there's significant cost of tile generation/trasfer.

You could just have an array of 40,000 references. Basically, empty array elements don't take up a lot of room until you actually put something in them (its one of the advantages of a dynamically typed language). Javascript doesn't know if you are going to put an int or an object into an array element, so it doesn't allocate the elements until yo put something in them. So to summarize, just put them in an array - that simple!
Alternatively, if you don't want the interpreter to allocate 40,000 NULLs at start, you could use a dictionary method, with the keys being the 1 in 40,000 array indices. Now the unused elements don't even get allocated. Though if you are going to eventually fill a substantial portion of the map, the dictionary method is much less efficient.

Have a single associative array, which initially starts out with zero values.
If the user visits, say, grid 32x41y, you set a value for the array like this:
if (!(visitedGrids.inArray('32'))
{
visitedGrids['32'] = {}
}
visitedGrids['32']['41'] = data;
(This is pseudo-code; I haven't checked the syntax.)
Then you can check to see if the user has visited the appropriate grid coordinates by seeing if there is a value in the associative array.