Cannot acces my array from json object

Hello everyone,

I am creating a frontend framework for my website and I am creating a databinder.
This “class” will get and return data into a specific way.
For example return to json, return to array or whatever is needed.

I am trying to return an object which holds a json var which holds the arrays of data that I need.

Hopefully this does make sense.

Now I can return the whole object which shows all the info.
But when I try to return the json var inside the object I get a empty object back while there should be an array with data.

Can somebody please check it out.
Here is the link : gist to files

Best regards,
Wouter.

Hi Wouter,

The most immediate problem with your code is that returnObj() is called before the AJAX request is complete, so you’re always going to get an empty object back.

There are two common ways to deal with this sort of situation:

  • Pass a callback function - have your method that retrieves the data accept a function as an argument. When the AJAX request completes, it can call the function with the results. Example:
function getData(url, successCallback) {
  $.getJSON(url, function(data) {
      // Process the data in some way - e.g. extract the section of the response that you want
      successCallback(modifiedData);
  });
}

// Usage:
getData('App/Database/Pages.json', function(data) {
  console.log(data);
});
  • Promises - have your method return a promise. A promise is a special object that is a placeholder for future data. It will either be resolved successfully or with an error. All jQuery’s AJAX methods return promises by default. Example:
function getData(url) {
  return $.getJSON(url);
}

// Usage:
getData('App/Database/Pages.json')
  .done(function(data) {
    console.log(data);
  });

one of the advantages of promises is that you can attach as many different success/failure callbacks as you need.

Hello fret,

Ty for your awnser.
I will change it tonight when Im done with work but I still have a question.

I thought I was stacking the calls.
So I thought I call the construct first which gets the data and then I return it so it does get the data when I call returnObj.

But it does not work like this ?
I am new to creating javascript classes.
More used to php so I am having some trouble with js.

I also have some questions about what is going on in your code:

  1. What is the reason for defining your own _construct method, rather than using a standard constructor function with the new keyword?
  2. What is the intention behind this line: $.data("_construct", $.extend(options, settings));? This doesn’t actually work as it stands, as the $.data method expects a DOM element as the first argument.

JavaScript is asynchronous, which means that the it doesn’t always wait for one instruction to be completed before moving on to the next. In your _construct method, when the $.ajax method is called, the browser doesn’t wait for the results before continuing (and as it’s a network request, the result might take a while to come back). Instead, it executes the next statement, which is return this; so the rest of your code is executed before the AJAX request has completed.

The _construct is a habbit of mine.
Maybe its not how it should be done but the “class” I am making I would like to have a kind of constructor that’s loads in what I need before I call a functions that needs the data. ( if this could be better please could you explain more about this ?)

As awnser to your second question I could not get a response so I looked online and came across that line of code.
Which made me think it worked but it doesn’t.
Yes I should have looked up before I even tried.

What would you suggest I do ?

The standard way to create a ‘class’ in JavaScript is to create a contructor function (the convention is to capitalize the first letter of the name) which you call with new to create instances:

// create 'class' constructor
function Databinder(apiUrl) {
    this.url = apiUrl;
}

// add method
Databinder.prototype.fetch = function() {
    return $.getJSON(this.url)
}

// Instantiate new object from class
var pages = new Databinder('App/Database/Pages.json');

pages.fetch()
    .then(function(pages) {
        console.log(pages);
    });

Note that this is just a rough example. Depending on what you’re trying to achieve, you might not even need to create a class… sometimes a function will do.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.