Javascript vanilla ajax turn response into array of objects?

Question

I am trying to experiment with javascript on a deeper level. I am building my own $http object that has its own http methods.

var $http = {

    get: function(url, success, error) {
        httpHelper('GET', url, success, error);
    }

};

function httpHelper(type, url, success, error) {
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
            if(xmlhttp.status == 200){
                success(xmlhttp.responseText);
            }
            else if(xmlhttp.status == 400) {
                error(xmlhttp.status);
            }
            else {
                error(xmlhttp.status);
            }
        }
    }

    xmlhttp.open(type, url, true);
    xmlhttp.send();
};

On the server I am returning an array of JSON objects with the request.

app.get('/api/players/', function(req, res) {
  res.json([
    { name: 'Mike', points: 33 }, 
    { name: 'Shaq', points: 16 }
  ]);
});

On the client it seems I am getting a string [{"name":"Mike","points":33},{"name":"Shaq","points":16}].

How can I effectively convert the client side response to an array of JSON objects?

the response you're getting is JSON - you need to convert it to a javascript object using JSON.parse — Jaromanda X
– Jaromanda X, Commented Jan 25, 2016 at 1:58
Sorry, I didn't check the validity of the xmlhttprequest stuff — Jaromanda X
– Jaromanda X, Commented Jan 25, 2016 at 1:59

Marcos Casagrande · Accepted Answer · 2016-01-25 02:03:00Z

2

Just use JSON.parse

JSON.parse(xmlhttp.responseText);

answered Jan 25, 2016 at 2:03

Marcos Casagrande

40.7k11 gold badges93 silver badges107 bronze badges

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

Comments

Clavin · Accepted Answer · 2016-01-25 02:09:58Z

2

Even though a comment has already answered the question, I felt I may as well throw out an actual answer (plus clarification on where to put it!)

You're looking for JSON.parse. Where you put it depends on if your $http object will only be getting JSON responses or not. If it does, then put your JSON.parse in what you send to success:

success(JSON.parse(xmlhttp.responseText));

However, if you also want to accept other types of requests, then put your JSON.parse in your callback that is success.

$http.get('some url', function(result) {
    result = JSON.parse(result);
}, function() {
    // ...
});

edited Jan 25, 2016 at 2:09

answered Jan 25, 2016 at 2:04

Clavin

1,1908 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript vanilla ajax turn response into array of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related