Calling an API, storing in local variable and displaying through JS

[anelezeravla]

We have a grid that shows the data obtained from an API Rest. The JSON object returned by the API is also stored on a local variable (to avoid calling twice the API to get the same data). Whenever we click on any element of the grid, we store the value of the id that was clicked, and then navigate to another page where the complete data of that item is shown.

Everything works fine this way.

However, if the local variable has a value, we don't call the API REST, instead we use the local variable, showing the data on the grid with the same structure as it was provided by the API, but displaying it through a JavaScript script instead. The problem is that when we click on any of the shown data on the grid, the app navigates to the second page, but it never gets to store the id value on the local variable.

Any ideas on how to solve this? Thank you!

Note: We think that the JavaScript function that shows the items is correct, because we are also using that script to generate an infinite scroll (when the user scrolls down, new items are displayed), calling the API REST and then showing them through the same JavaScript function.

[Illya Stepanov]

Hello -
ul
li
How you saved the 'id'? Screenshot or code example will help.
/li
li
By the way, you can use REST service and mapping for adding data from localStorage variable to the page, and not manualy. This will be much easier especially when you have result as a array of values.
:: http://docs.appery.io/documentation/r...
/li
/ul

[anelezeravla]

Good idea suggesting http://docs.appery.io/documentation/r... ! It's so much easier that way. However, I'm not suceeding in using the stored values in the local variable, it always displays the values that were returned by the API (I'm positive, because I have checked by changing the data on the database behind the API after storing the data on the local variable and then requesting again the page).

Here is the code I'm using for this:

if (localStorage.getItem("dataCache")!=null){
restservice.requestOptions.echo = localStorage.getItem("dataCache");
restservice.execute();
}else{
restservice.requestOptions.echo = '';
restservice.execute();
}

Perhaps I need two services for the same page so that they do the mapping for the same objects?

[Kateryna Grynko]

Hi,

You can use the following condition:preif (!localStorage.getItem("dataCache",""))/preIf an empty string will be stored in a variable 'dataCache' then your current condition won't work.

[anelezeravla]

Hello,
We have also tried forcing this code to run with no success:

coderestservice.__requestOptions.echo = localStorage.getItem("dataCache");
restservice.execute(); /code

(we are positive that the value that this code returns comes from the API response, not from the actual local variable).

Any hints on what the problem might be?

[Kateryna Grynko]

Hi,

localStorage returns string and you need to write it to echo object. First, parse this string:prevar dataCache = jQuery.parseJSON(localStorage.getItem("dataCache"));
restservice.__requestOptions.echo = dataCache;/pre

[anelezeravla]

Still not working...

var almacen = localStorage.getItem("dataCache");
var almacenJSON = jQuery.parseJSON(almacen);

console.log(almacenJSON);
// here we check that the value we want is stored in this variable (and the value is different to the value returned by the REST service)

restService1.__requestOptions.echo = almacenJSON;
restService1.execute();

After execute, the values that are being displayed are the ones coming from the REST service, not the values stored on almacenJSON.

We have created a page for the sole purpose of testing this code, so there is no other code added that might be creating problems.

[Maryna Brodina]

Hello!
1) Don't do parseJSON
2) You have to assign value requestOptions.echo to the service, but service instance on page. Should be like this prerestservice.requestOptions.echo = localStorage.getItem("dataCache"); /pre where restservice - service name (name from service folder, not from Data tab).

[anelezeravla]

Thank you very much, Maryna! That was exactly what we were looking for.