I have some code that when you console.log it, it looks like the image below:

The code I am running is as follows:

onClick={() => {
                    const stream = fetch(
                      'https://lichess.org/api/games/user/neio',
                      { headers: { Accept: 'application/x-ndjson' } }
                    );

                    const onMessage = obj => {
                      console.log('test', obj);
                    };

                    const onComplete = () =>
                      console.log('The stream has completed');

                    stream.then(readStream(onMessage)).then(onComplete);
                  }}

export const readStream = processLine => response => {
  const stream = response.body.getReader();
  const matcher = /\r?\n/;
  const decoder = new TextDecoder();
  let buf = '';

  const loop = () =>
    stream.read().then(({ done, value }) => {
      if (done) {
        if (buf.length > 0) processLine(JSON.parse(buf));
      } else {
        const chunk = decoder.decode(value, {
          stream: true,
        });
        buf += chunk;

        const parts = buf.split(matcher);
        buf = parts.pop();
        for (const i of parts) processLine(JSON.parse(i));
        return loop();
      }
    });

  return loop();
};

export default readStream;

What I am trying to do is build a parent object that contains all these individual rows of data.

I'm new at promises and fetch etc. So currently, I have no idea on how to build this parent object that contains each individual row.

Any suggestions?