How to access XMLHttpRequest values outside the onreadystatechange function

Question

i have a .php file that outputs a json data, which it does perfectly and i get this results:

[
{
    "name": "ADMINISTRATOR",
    "email": "",
    "first_name": "",
    "last_name": ""
},
{
    "name": "GUEST",
    "email": "",
    "first_name": "",
    "last_name": ""
},
{
    "name": "KRBTGT",
    "email": "",
    "first_name": "",
    "last_name": ""
},
{
    "name": "DIMERS",
    "email": "",
    "first_name": "Dimers",
    "last_name": "David"
}
]

i also have a .js file which calls this results using XMLHttpRequest like so:

function loadDoc() {
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) 
    {

        var contact = JSON.parse(this.responseText);

              for (var i = 0; i < contact.length; i++) 
            {
                var contacts = {name: contact[i].name, email: contact[i].email, 
                 Govphone: contact[i].first_name, phone: contact[i].last_name};

                console.log(contacts);

            }


       }
    };
  xhttp.open("GET", "js/contalist.php", true);

  xhttp.send();

  }

  loadDoc();

in console i'm able to get the contacts. but i need to assign the value from the response to a variable outside of the call, like so

 .factory('ContactService', [function () {
    var factory = {};

    factory.getContacts = function (response) {

    var contactsList=contacts;
    return contactsList;

   };

   return factory;
  }]);

Can someone help me on how I can at least extract the contents in the contacts variable so that i can use it else where within the code?

Please add your output for `this.responseText` to the question. — O.O, Mar 06 '19 at 13:54

O.O · Accepted Answer · 2019-03-06T13:30:37.577

1

You can push the responseText and have it available elsewhere in the scope.

var theContacts=[];
function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            theContacts.push(this.responseText);
        }
        xhttp.open("GET", "js/contalist.php", true);
        xhttp.send();
    }
}

loadDoc();


.factory('ContactService', [function() {
    var factory = {};

    factory.getContacts = function(response) {

        var contactsList=theContacts;
        return contactsList;
    };

    return factory;
}]);

To get a flattened array:

theContacts.flat();

edited Mar 06 '19 at 13:30

answered Mar 06 '19 at 12:06

O.O

1,389
14
29

console.log(thecontacts); – Dimers David Mar 06 '19 at 12:27
@DimersDavid see update. – O.O Mar 06 '19 at 12:40
Thanks a lot, this one works for me so far, but the output comes with an extra pair of "[]" how do i remove them? – Dimers David Mar 06 '19 at 13:12
I've tried that, and i get no results. and when i try to console out the pushed data i get an Uncaught TypeError: Cannot read property 'push' of undefined at XMLHttpRequest.xhttp.onreadystatechange – Dimers David Mar 06 '19 at 13:27
@DimersDavid My bad, ignore that try `console.log(theContacts.flat())` – O.O Mar 06 '19 at 13:31
with the above codes once implemented i get an empty array – Dimers David Mar 06 '19 at 14:18

Juky · Answer 2 · 2019-03-07T08:37:15.063

0

Use a global function for your factory.getContacts, and since it's a global function, you can use it in your onreadystatechange.

var getContacts = function(contacts) {
  // do whatever you want with contacts which is array
}

// in your factory service
.factory('ContactService', [function () {
  var factory = {};

  factory.getContacts = getContacts;

  return factory;
}]);

// in your XHR request
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) 
{

    var contact = JSON.parse(this.responseText);
    var contacts = [] // init your array to store contacts
    for (var i = 0; i < contact.length; i++) {
        // push the contact to array
        contacts.push({name: contact[i].name, email: contact[i].email, Govphone: contact[i].first_name, phone: contact[i].last_name});
    }

    getContacts(contacts) // call the same getContacts function

   }
};

edited Mar 07 '19 at 08:37

answered Mar 06 '19 at 12:04

Juky

247
1
9

i tried this but i'm getting an error "contacts is not defined". – Dimers David Mar 06 '19 at 12:20
where did that error occur? You should check if you have defined the variable in the scope or if the variable name is correct. – Juky Mar 06 '19 at 12:30
i got it working by using 'push', given by @Olayinka. however, the output comes with an extra pair of "[]" any ideas on how i can remove them? – Dimers David Mar 06 '19 at 13:21
Because your responseText is an array hence when you push to `theContacts` which is also an array, you get nested array. To skip the extra `[]`, just reuse your code that parse the responseText to json, then use `concat` instead of `push` – Juky Mar 07 '19 at 08:39
I finally got it to work, three months ago, I just got back! The problem was that I was calling the whole array instead of calling its content! – Dimers David Jul 08 '19 at 07:39

How to access XMLHttpRequest values outside the onreadystatechange function

2 Answers2