Setting local storage variable from results of query service

[Peter Viglietta]

I'm building a social networking app in which the user has to search their city, choose their city from the list of results, and then write a post that other users from that city will be able to see. So I have a Cities collection that holds every city in the US, and then a Posts collection where one of the columns is CityID, the unique identifier from the cities collection. When the user taps on their city, I need it to store the _id of the Cities collection in a local storage variable called 'CityID'. The city and state is displayed in a label within a grid component that the Cities query service is mapped to. On the grid component I added Javascript to also create an attribute for the _Id, and then I have a click event on the label that's within the grid component to set that attribute (the _id from the cities table) as local storage variable 'City ID' when the user taps on it. Then the next click event is to navigate to the next page. My problem is, nothing is happening when I tap on a city from the list of cities. It doesn't take me to the next page, which makes me think the javascript command to set the local storage variable is failing. See screenshot below for the setup. Is the problem that I'm using a Grid component, and clicking on a label within that grid? Since the JS that creates the attribute is on the grid and not the label? Please help! Thanks.

[Kateryna Grynko]

Hi Peter,

Use codelocalStorage.setItem()/code instead of codesetVar()/code please.

[Peter Viglietta]

Thanks for the reply! I tried this, but now it's taking the ID of the last city on the list of search results, rather than the one I click on.

[Peter Viglietta]

I tried that but it's taking the ID of the last city on the list.. If I use a List component instead of a Grid component would that work?

[Kateryna Grynko]

Hi Peter,

This will work for each label as you use an object 'this'.

[Peter Viglietta]

Please see screenshot. The end goal is to get the Cities _id that the user chooses to save as a local storage variable.

1) User enters a city and hits search. The query service runs this on the Cities collection:
return '{"city":{"$regex":"^'+value+'", "$options":"i"}}';
and gives a list of cities in a Label within a Grid component.

2) When the query service runs, I need it to create an element (not a local storage variable) with the _id from the Cities collection that will be associated with every city that appears as a search result. I don't want it to appear on the label, I just need it stored in it?

3) When the user clicks on that search result, I need there to be a click event on that mobileLabel that uses the element (the id) set in step 2 to set the _id from the Cities collection as a local storage variable called CityId, to be used in future screens.

[Yurii Orishchuk]

Hi Peter,

Thanks for this detailed answer.

Please take a look in link below to understand how to do what you want.

http://devcenter.appery.io/tutorials/...

Regards.

[Peter Viglietta]

I'll try that. Thanks so much for your help!