CODEWITHSUNDEEP
javascript
C Francis
C Francis

Reputation: 53

How to use a function as a property of an object inside another function in javascript

I'm trying to create a function that will take object as a parameter and inside the object I want to have an object method just same way jQuery ajax works. My problem now is that I can't get that object method to work.

function myAjax({
  type,
  url,
  success
}) {
  var suc = "";
  typeof type === "undefined" ? type = "GET" : type = type;

  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      suc = this.responseText;
      //alert(this.responseText);
    }
  };
  req.open(type, url, false);
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded ");
  req.send("fname=chijioke&lname=francis");

  function success(suc) {}
  }




  myAjax({
    type: "post",
    url: "page.html",
    success: function(e) {
      alert(e);
    }
  });

I want to do something similar to this jQuery ajax call

$.ajax({
  type: "post",
  url: "index",
  data: {
    id: id
  },
  success: function(feedback) {
    alert(feedback);
  }
});

I need to get the responseText through the success function but it is not working. I want this to work like that of jQuery ajax success, this is really for learning purpose.

Upvotes: 0

Views: 656

Answers (3)

Zachary Brooks
Zachary Brooks

Reputation: 300

what you are trying to do is actually pretty common - callback functions. You pass a function as a parameter and simply call it inside.

In your implementation, you are doing

function success(suc){}

This is actually just defining a method called success.. you need to do actually call the method like this

success(suc);

Also, your line where you check to see if the type is undefined won't typically evaluate to true, as you should be checking if 

type === undefined //"undefined" != undefined

One more thing I would like to mention is that you are attempting to call the callback function at the end of your method, but you should actually be calling it in the onreadystatechange so that way it's being called when the request is completed, not when the method is completed.

    req.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            suc = this.responseText;
            success(suc);
        } 
    };

Upvotes: 2

Nui San
Nui San

Reputation: 56

The "success" method is already declared when you execute myAjax, so do not need to declare it again in myAjax.

Try this:

function myAjax(type, url, success) {
    var suc = "";
    typeof type === "undefined" ? type = "GET" : type = type;

    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            suc = this.responseText;
            success(suc); //Call to outside method
        }
    };
    req.open(type, url, false);
    req.setRequestHeader("Content-type", "application/x-www-form- 
    urlencoded ");
    req.send("fname=chijioke&lname=francis");
}

Upvotes: 1

Cal Irvine
Cal Irvine

Reputation: 1144

What you are trying to do is called a callback function. Rather than declaring a function inside of your function, you should be calling the function being passed to it.

so instead of 

    function success(suc) {}

Try doing

    success(suc);

https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced Here's a guide I found on the topic.

Upvotes: 3

Related Questions