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

Question

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.

Your code was not indented at all, so I did that, and it shows some flaws in your code; namely that your myAjax function is never closed. — Heretic Monkey
– Heretic Monkey, Commented May 30, 2019 at 15:47

Cal Irvine · Accepted Answer · 2019-05-30 15:47:34Z

3

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.

answered May 30, 2019 at 15:47

Cal Irvine

1,1441 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cal Irvine Over a year ago

If you want some fun further reading, learn about promises, which are another method of dealing with asynchronous code. They're a lot more fun than callbacks in a lot of cases (But both definitely have good use cases!) developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Zachary Brooks Over a year ago

Promises actually use callback functions as well, but they clean the process of calling the asynchronous methods, so definite check them out.

Cal Irvine Over a year ago

Yea, they mostly just provide for much more readable and maintainable code.

Zachary Brooks · Accepted Answer · 2019-05-30 15:54:59Z

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); } };

Nui San · Accepted Answer · 2019-05-30 15:51:33Z

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"); }

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related