Without renaming any of the variables, modify the data callback to concatenate the stream of data to the response

Hi Kelinia Johnson,

Say you have some code that looks something like this...

button.addEventListener('click', event => {
    console.log(event.target)
})

Assuming that button is a valid variable/element, we know that when the button is clicked, the target of that click will be logged to the console (I'm assuming that based on your point total in JavaScript that you've encountered code that looks like this; if I'm wrong about this let me know).

We know the event object is what is automatically passed to the callback function (which is the arrow function that is invoked once the button is clicked).

event (like dataChunk) is just the name we give to represent the the argument/data that's being passed in. In theory, you could switch the name of event (or dataChunk) to barbecue and nothing about the way your code runs would change (it just wouldn't be a semantic name, and might potentially confuse other coders).

The code in the challenge is very much like that, except there isn't only one dataChunk that is passed into the callback function.

Envision dataChunk as if it were some really long string. A string that's 5000 characters long. And because it's so long it can't all be passed into the callback function at the same time. The first 1250 characters are passed in, then the next 1250, and so on and so on.

Each time the data is ready, the 'data' event is triggered on the response object. And so each time the data is ready, the callback function of ((dataChunk) => {}) is called.

dataChunk is the variable that represents the first 1250 characters, then the second 1250 characters, then the third 1250 characters, and finally the last 1250 characters.

What code would you need to write inside of the callback function ((dataChunk) => {}) to make sure that the responseBody variable holds all 5000 characters, and not just a portion of it? Does that make more sense?

My first experience with XMLHttpRequests was a little difficult to process/comprehend. But once I grew to being able to see "response.on" like any other element/object that I was listening for an event on, it became easier to visualize the mechanics behind it.

Just in case, that explanation doesn't clear things up enough, I'm including the solution for the first part of the challenge below:

const https = require("https");
const request = https.get("https://teamtreehouse.com/chalkers.json", response => {
    let responseBody = "";

    response.on("data", dataChunk => {
      responseBody += dataChunk
    });

    response.on("", () => {
        console.log(responseBody);
    });

});

request.on("error", error => {
    console.error(error.message);
});