$.ajax and IBM Worklight's JSONstore

Question

I am trying to store json data returned by the $.ajax() function, but am having trouble. Below is the call I make (which I know returns my JSON data properly, I have logged it (url removed for personal reasons).

$.ajax({
    type: "GET",
    url: **url that returns json data**
    contentType: "application/json; charset=utf-8",
    dataType: "json", 
    success: function(msg) {
        return msg;
    },          
    error: function(e){
      WL.Logger.log(e);
    }
 });

And then I initialize my JSONStore using worklight:

//Setup JSON store
var collectionName = 'people';

//Object that defines all the collections
var collections = {};

//Object that defines the 'people' collection
collections[collectionName] = {};

WL.JSONStore.init(collections);

So now here is where I am having my issue. I want to add the JSON data I am returning from my ajax call to my JSONStore. So I have attempted this (getJSONData is a wrapper around the ajax call above):

WL.JSONStore.get(collectionName).add(getJSONData());

However, when I print the collection, nothing is stored in it, and when I print WL.JSONStore.get(collectionName).count, nothing is returned. How can I add the data returned to me properly?

Daniel A. González · Accepted Answer · 2014-06-19T15:12:31.817

Both the AJAX call and the JSONStore APIs are asynchronous APIs, meaning that you either have to use the deferred returned by them, or pass a success callback to be able to wait for it to finish before going to the next step.

The reason you get the PERSISTENT_STORE_NOT_OPEN is that you are calling init and instead of waiting for it to finish, you immediately call add without init being done, which is why it says the store has not been initialized.

You would probably do something like this:

$.ajax({
  type: "GET",
  url: **url that returns json data**
  contentType: "application/json; charset=utf-8",
  dataType: "json", 
  success: function(msg) {
      //Setup JSON store
      var collectionName = 'people';

      //Object that defines all the collections
      var collections = {};

      //Object that defines the 'people' collection
      collections[collectionName] = {};

      WL.JSONStore.init(collections)

      .then(function(res){
         WL.JSONStore.get(collectionName).add(getJSONData());
      });

      return msg;
  },          
  error: function(e){
    WL.Logger.log(e);
  }
});

(Note how I changed the success callback to use the result of the AJAX call.)

Edit: Here is some more information on deferreds and promises in Javascript for reference: http://code.tutsplus.com/tutorials/wrangle-async-tasks-with-jquery-promises--net-24135

JSONStore returns a promise with every API call so that you can use the promises for handling callbacks instead of having to pass a success and failure callback everytime.

That seems to have worked! Now I have to figure out how to get items out of this large list of JSON items I have. I used find, but I can't see anything when I log it currently, just says [object Object]. — David, Jun 19 '14 at 20:15
You are probably forgetting to do JSON.stringify(object) to turn the object to a string you can log. — Daniel A. González, Jun 19 '14 at 20:30

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

The call you are making above is asynchronous. So its probably not returning what you think it is.

You would either have to:

Use an deferred to wait for the return
put your JSONStore add command within the success function of your ajax call.
Call ajax with the sync flag: jQuery: Performing synchronous AJAX requests

edited May 23 '17 at 10:34

Community

1
1

answered Jun 19 '14 at 13:25

tik27

2,698
1
16
25

Thanks. I tried putting the add command in the success function, but now I am getting:[wl.jsonstore] {"src":"store","err":-50,"msg":"PERSISTENT_STORE_NOT_OPEN","col":"people","usr":"jsonstore","doc":{},"res":{}}. I have initialized the store though, so I am confused as to why this is happening. – David Jun 19 '14 at 13:56
I was going to reply here in a comment, but my answer was too long so I put it in a separate answer. Basically, you called init as if it was synchronous but it is asynchronous, so when you call add, it has not finished initializing the store, so it would be as if it is not initialized. See my answer for more details. – Daniel A. González Jun 19 '14 at 15:17

$.ajax and IBM Worklight's JSONstore

2 Answers2