Issues with Google map location display off of Appery Backend locations

[Cody Blue]

Thanks for fixing the mapping problem.

However, I am still running into issues while accessing the locationsList storage variable in the tutorial. For example, the following snippet results in - undefined - message on console.

var pLocations, iLocation;
pLocations = localStorage.getItem('locationsList');
iLocation = pLocations[1].location;
console.log(iLocation);

Could you advise of the issue here and when that can be fixed? If theres a glitch in my approach, could you suggest suitable way to access the elements of locationsList?

Thanks.

[Cody Blue]

Thanks for fixing the mapping problem.

However, I am still running into issues while accessing the locationsList storage variable in the tutorial. For example, the following snippet results in - undefined - message on console.

var pLocations, iLocation;
pLocations = localStorage.getItem('locationsList');
iLocation = pLocations[1].location;
console.log(iLocation);

Could you advise of the issue here and when that can be fixed? If theres a glitch in my approach, could you suggest suitable way to access the elements of locationsList?

Thanks.

[Illya Stepanov]

Hello -- please debug your code, you can look here. And in Dev tools (F12 in Chrome) you can check in Resources tab if your local storage variables are defined correctly.

[Cody Blue]

Thanks for the pointer. However I have indeed looked via all available debugging tools in Chrome, Firebug. The locationsList local storage variable in the tutorial displays - [object Object],[object Object] in Chrome, and the contents of this variable are not accessible, as I pointed in my comment above. The snippet I included was just an example. While I am not expecting for my own code to be debugged by the forum, my worry is that that is there is a erroneous mapping or structural problem with localStorage variable in the tutorial, that is causing the inability to access its content.

I would greatly appreciate any insights or guidance on the matter.

[Maryna Brodina]

Hello!
1) Most likely you incorrectly save data. Please take a look here how to store arrays, objects in localStorage http://docs.appery.io/documentation/u...
2) your code
prevar pLocations, iLocation;
pLocations = localStorage.getItem('locationsList');
iLocation = pLocations[1].location;
console.log(iLocation); /pre
won't work even if you'll save data correctly because in localStorage you can only store string, that means pLocations[1].location returns undefined because in fact you call location property of string, but string doesn't have such property. So if you'll save object and stringify it with JSON.stringify (see item 1) then while retrieving you need to parse this string back into object. Here is some code sample:
prevar pLocations, iLocation;
try {
pLocations = JSON.parse(localStorage.getItem("locationsList"));
iLocation = pLocations[1].location;
console.log(iLocation);
}
} catch ( e ) {
}/pre

[Cody Blue]

Thanks for the feedback.

1) The data is being exactly stored as in your tutorial below:
http://docs.appery.io/tutorials/addin...

2) I wasn't aware that the localStorage only stored data as string - thanks for clarifying that. But the issue remains that even - JSON.parse(localStorage.getItem('locationsList')) - results in an error.

As I indicated earlier the locationsList local storage variable displays - [object Object],[object Object] in Chrome debug which is not consistent with the fact that I should see a string - as I indicated the I am populating it "exactly" as in your tutorial.

I highly suspect that there is a bug in Appery and the mapping to locationsList in the tutorial doesn't result in proper storage in localStorage.

Could you provide suggestions or let me know when the issue might be fixed? If you are able to test your tutorial above and access the locationsList localStorage along the lines of your own suggestion and your code in the note above, that should reveal the cause of the problem to you.

Thank you for your attention and support: I do appreciate it.

[Illya Stepanov]

Hi Cody -- can you give exact steps how to reproduce this problem?

[Cody Blue]

Hi IIlya,

Please see below, and let me know if you have any questions and suggestions, so we can troubleshoot.

1) Replicate the tutorial:
http://docs.appery.io/tutorials/addin...

2) In specific, under the section Adding Location Points to the Map on the page above, note point #7: mapping to locationsList local storage variable.

3) After running the application above, inspect locationsList in Chrome debug. (I do not see a string there).

4) Add Javascript to access locationsList. E.g.

getCoords (Component) Success (Event) Run JavaScript (Action)

Add Javascript:

var pLocations, iLocation;
try {
pLocations = JSON.parse(localStorage.getItem(‘locationsList’));
iLocation = pLocations[1].location;
console.log(iLocation); }
catch ( e ) {
}

[Maryna Brodina]

Hello! The next step in tutorial is adding JS in mapping. locationsList variable is not used and it doesn't matter there is a wrong result. If you need to save entire service response to localStorage variable it's better to add the following code on service success event:
prelocalStorage.setItem("varName", JSON.stringify(data));/pre
You can do that using mapping, but if service returns array that would be more complicated.

[Cody Blue]

Thanks for the suggestion. I tried that and all variables shown as expected (please see my detailed description in steps below) on debug console. However I cannot see the location markers displayed on the map (multiGoogleMap). I have described the necessary steps to recreate the issue below. Can you please provide feedback?

I suspect that the problem is manifesting because of the issues I have pointed earlier. The console gives these error messages (even in vanilla version of your tutorial below):
http://docs.appery.io/tutorials/addin...
Cannot refresh, map is not initialized! appery.js:2242
Uncaught TypeError: Cannot call method 'getBounds' of undefined

**Steps to recreate issue:

------------------------------

On loading of main page, locations from backend (as in tutorial) are fetched and stored in localStorage via associated JS as follows:

var temp = localStorage.getItem('locationResponses');
if (temp) {
temp = temp + ',' + JSON.stringify(value);
} else {
temp = JSON.stringify(value);
}
localStorage.setItem('locationResponses', temp);

Things work fine and expected.

On loading of a separate Page-2, I attempt to display locations on multiGoogleMap (as in tutorial) on that page via associated JS (onload) as follows:

var locationStrings = localStorage.getItem('locationResponses');
var locationsList = $.parseJSON('[' + locationStrings + ']');
for(var c = 0; c < locationsList.length; c++) {
var locationItem = locationsList[c];
for (var i in locationItem) {
if(i == 'location') {
console.log(locationItem.location);
getCoords.execute({
'data' : {
'address' : locationItem.location,
'sensor' : true
}
});
}
}
}
var map = Appery('multiGoogleMap');
map.refresh();

getCoords and mutiGoogleMap above is same as in your tutorial:
http://docs.appery.io/tutorials/addin...

Although all variables have values as expected, I do not see anything displayed on the map.

Will highly appreciate your feedback..
Thanks