Skip to main content Accessibility Feedback

Working with XHR response data in vanilla JS

Yesterday, we looked at how to use XHR (XMLHttpRequest()’s) to get data from APIs with vanilla JavaScript.

The most common response type from API calls is JSON, an acronym for JavaScript Object Notation. It has the same structure and format (for the most part) as a JavaScript object (sometimes it’s wrapped in an array).

The response data can be accessed from the responseText property on the XMLHttpRequest object.

var xhr = new XMLHttpRequest();

// ...

var data = xhr.responseText;

Here it is in full context.

// Set up our HTTP request
var xhr = new XMLHttpRequest();

// Setup our listener to process completed requests
xhr.onload = function () {

	// Process our return data
	if (xhr.status >= 200 && xhr.status < 300) {
		// Runs when the request is successful
		console.log(xhr.responseText);
	} else {
		// Runs when it's not
		console.log(xhr.responseText);
	}

};

// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

There’s a small problem, though: XHR.responseText is returned as a string, even though it’s in JSON format.

Converting xhr.responseText from a string to an object

If you called the /posts endpoint over at JSON Placeholder, you would get back a list of posts. You might try to loop through them like this.

if (xhr.status >= 200 && xhr.status < 300) {
	xhr.responseText.forEach(function (post) {
		var title = post.title;
		var content = post.content;
	});
}

However, you’d get an error. Because the xhr.responseText is a string, you can easily manipulate it.

To work with the data, you need to convert it back into an object. You can do this using the JSON.parse() method.

// Convert data string to an object
var data = JSON.parse(xhr.responseText);

// Get the first item
var firstPost = data[0];

// Loop through each post
data.forEach(function (post) {
	console.log(post);
});

Here it is in full context again.

// Set up our HTTP request
var xhr = new XMLHttpRequest();

// Setup our listener to process completed requests
xhr.onload = function () {

	// Process our return data
	if (xhr.status >= 200 && xhr.status < 300) {
		// Runs when the request is successful
		console.log(JSON.parse(xhr.responseText));
	} else {
		// Runs when it's not
		console.log(JSON.parse(xhr.responseText));
	}

};

// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

Working with your converted data

Going back to our example from before, if you wanted to loop through each post, you would instead do this.

if (xhr.status >= 200 && xhr.status < 300) {
	var posts = JSON.parse(xhr.responseText);
	posts.forEach(function (post) {
		var title = post.title;
		var content = post.content;
	});
}