Mapping LocalStorage Array to List Component

[Alan Fernandez]

How can I map a list component to an array stored in localstorage? This is so that I won't be calling on the database every time the page containing the list is opened.

[Illya Stepanov]

Hi Alan,

Please look here (in part of example) :: http://devcenter.appery.io/documentat...

[Alan Fernandez]

I found out how to do it through this post: This Post

However, I have a problem with the click function.
On click the alert pops up but when you close it another one comes up and so on forever.

code
function generateList(listName){
var listComponent = Appery(listName);
$.each(teacherNameArray, function(index, value) {
listComponent&#46;append($('<li><a>' +value+ '</a></li>'));
listComponent&#46;addClass('clickable')&#46;click(function(){
alert($(this)&#46;attr("name"));
});
});
}
/code

The teachersArray is an array of JSON objects thats generated by a call to the database.

Could you please help me out?

[Yurii Orishchuk]

Hi Alan,

That's not good way to implement it.

Other(most recommended) way is to use generic service.

Please take a look about it here: http://devcenter.appery.io/documentat...

Here is an a example solution for you:

1 Create generic service http://prntscr.com/434glf/direct.

2 Click "Add custom implementation"

3 Choose "new javascript" with name "genericService1JS". http://prntscr.com/434h6f/direct

4 Use following code in "JS" implementation:

pre

&#47;&#47;Note replace "genericService1JS" with your value&#46;
Appery&#46;genericService1JS = Appery&#46;createClass(null, {

Code: Select all

 init : function(requestOptions) { 
     this.__requestOptions = $.extend({}, requestOptions); 
 }, 

 process : function(settings) { 
         //Note: you need replace "yourLSV" with LSV that's stores your array. 
         var responseData = JSON.parse(localStorage.getItem("yourLSV")); 

         console.log("responseData"); 
         //Take a look on browser console to see what is stored in your LSV. 
         console.log(responseData); 

         settings.success(responseData ); 

         settings.complete('success'); 
 } 

});

/pre

After these steps you can use this service as you need.

Regards.

[Alan Fernandez]

I've created the service as you said,

In order to create a response for the service I added:
settings.success({"teacherList":responseData});
Which gives the response value "teacherList" the array.

Now when I map the response to my listView, I only get one listView item with all the names instead of several with one name each.

I've ticked the "array" checkbox in the service response settings too without any luck.

What am I missing?

Thanks

a href="http://postimage.org/index.php?lang=spanish" rel="nofollow" target="_blank"/a

[Alan Fernandez]

Nvm, I had the response incorrectly set up.

Thanks for your help Yurii!

[Kateryna Grynko]

Hi Alan,

Thank you for the update! Let us know if you need any help.

[Alan Fernandez]

Hi, the service has stopped working and I'm not sure why...

The code I am using is:

pre
Appery&#46;teacherDetailsService = Appery&#46;createClass(null, {
init : function(requestOptions) {
this&#46;__requestOptions = $&#46;extend({}, requestOptions);
},
process : function(settings) {
var responseData;
var teachersArray = JSON&#46;parse(localStorage&#46;getItem("teachersArray"));
code
for(i=0; i<teachersArray&#46;length; i++){
/code
if(teachersArray&#46;Name == localStorage&#46;getItem("teacherName")){
responseData = teachersArray;
}
}

settings&#46;success({"teacherDetails":responseData});
settings&#46;complete('success');
}
});

/pre

I've created the response with the corresponding variable names and mapped them to the labels that I'm using but I keep getting "undefined" values...

responseData does have the correct JSON object, it seems that I can't get the Response part of the service working correctly.

[Yurii Orishchuk]

Hi Alan,

It seems to be you have problem in your LSVs.

And your code not executes in "if" statement.

So you can add in your if statement some debug log. For example:

pre

if(teachersArray&#46;Name == localStorage&#46;getItem("teacherName")){
console&#46;log("in if statement");
console&#46;log(teachersArray);
responseData = teachersArray;
}

/pre

After you add this code you need to see in your console these debug messages. If you will not get this messages it means your LSVs are not properly set.

Regards.

[Alan Fernandez]

The problem isn't on my LSVs nor is it on the If statement as both are working. At the end of the code, responseData does have a value so everything is working till that point.

I'm sure that the problem is on the last lines of code:

settings.success({"teacherDetails":responseData});
settings.complete('success');

I believe that the values in responseData aren't being passed to my Response values and that's why they are all undefined when I execute the service.

https://imageshack.com/i/p7nxxo0np

(This teacher doesn't have all the details but her name should be showing at the top instead of Undefined)

This are the columns in my database, the values that the service is supposed to return:

http://imageshack.com/i/idn0WxNSp

This is how I've set my response:

http://imageshack.com/i/eyTuSzTQp

Is that correct?
Should I try erasing the service and building it from zero again?