public/app.js
// So this function streams data right to the webpage without waiting for all of it to arrive.
So this function streams data right to the webpage without waiting for all of it to arrive.
So this function streams data right to the webpage without waiting for all of it to arrive .
async function runQueryThenStreamToDisplay(queryExpression, arrayOfFieldsToDisplay, nameOfPrimaryKey)
  {
    const fetchPromise = fetch('api/user' + queryExpression)
    .then
    (
      (res) => 
      {
        if (!res.ok) 
        {
          console.log("Error trying to load the list of users: ");        
        }
        if (res.status === 204) 
        {
          return;
        }
        let textBuffer = '';
        return res.body
        .pipeThrough
        (
          new TextDecoderStream()
        )
        .pipeThrough
        (
          new TransformStream
          (
            {
              transform(chunk, controller) 
              {
                textBuffer += chunk;            
                const lines = textBuffer.split('\n');
                for (const line of lines.slice(0, -1))
                {
                  controller.enqueue(line);
                } 
                textBuffer = lines.slice(-1)[0];             
              }, 
              flush(controller) 
              {
                if (textBuffer) 
                {
                  controller.enqueue(textBuffer);
                } 
              } 
            } 
          ) 
        ) 
        .pipeThrough
        (
          new TransformStream
          (
            {
              transform(line, controller) 
              {
                if (line) 
                {
                  controller.enqueue
                  (
                    JSON.parse(line)
                  ); 
                } 
              } 
            } 
          ) 
        ); 
      } 
    ); 
    const res = await fetchPromise;
    const reader = res.getReader();
    function read() 
    {
      reader.read()
      .then
      (
        ({value, done}) => 
        {
          if (value) 
          {
            var tr = table.insertRow(-1);            
            arrayOfFieldsToDisplay.forEach(function(arrayElement, elementIndex)
            {
              let newCell = tr.insertCell(elementIndex);
              newCell.innerHTML = value[arrayElement];               
            });   
            let lastCell = tr.insertCell(arrayOfFieldsToDisplay.length);             
            lastCell.innerHTML = '<a href="/user/edit?userId=' + value[nameOfPrimaryKey] + '">View / Edit / Delete</a>';
          } 
          if (done) {return;}
          read();
        } 
      ); 
    } 
    read();
  }
async function runQueryThenStreamToDisplay ( queryExpression , arrayOfFieldsToDisplay , nameOfPrimaryKey ) { const fetchPromise = fetch ( 'api/user' + queryExpression ) . then ( ( res ) => { if ( ! res . ok ) { console . log ( "Error trying to load the list of users: " ) ; } if ( res . status === 204 ) { return ; } let textBuffer = '' ; return res . body . pipeThrough ( new TextDecoderStream ( ) ) . pipeThrough ( new TransformStream ( { transform ( chunk , controller ) { textBuffer += chunk ; const lines = textBuffer . split ( '\n' ) ; for ( const line of lines . slice ( 0 , - 1 ) ) { controller . enqueue ( line ) ; } textBuffer = lines . slice ( - 1 ) [ 0 ] ; } , flush ( controller ) { if ( textBuffer ) { controller . enqueue ( textBuffer ) ; } } } ) ) . pipeThrough ( new TransformStream ( { transform ( line , controller ) { if ( line ) { controller . enqueue ( JSON . parse ( line ) ) ; } } } ) ) ; } ) ; const res = await fetchPromise ; const reader = res . getReader ( ) ; function read ( ) { reader . read ( ) . then ( ( { value , done } ) => { if ( value ) { var tr = table . insertRow ( - 1 ) ; arrayOfFieldsToDisplay . forEach ( function ( arrayElement , elementIndex ) { let newCell = tr . insertCell ( elementIndex ) ; newCell . innerHTML = value [ arrayElement ] ; } ) ; let lastCell = tr . insertCell ( arrayOfFieldsToDisplay . length ) ; lastCell . innerHTML = '<a href="/user/edit?userId=' + value [ nameOfPrimaryKey ] + '">View / Edit / Delete</a>' ; } if ( done ) { return ; } read ( ) ; } ) ; } read ( ) ; }
So this function streams data right to the webpage without waiting for all of it to arrive.
So this function streams data right to the webpage without waiting for all of it to arrive .
// Define a client function that calls for data from the server. // Verify that we have some sort of 2xx response that we can use // throw res;          // If no content, immediately resolve, don't try to parse JSON // Initialize variable to hold chunks of data as they come across. // Process the stream. // Decode as UTF-8 Text // Split on lines // Split the string of records on the new line character and store the result in an array named lines. // Cycle through all elements in the array except for the last one which is only holding a new line character. // Put the element from the array into the controller que. // End of: for (const line ...) // Put the last element from the array (the new line character) into the textBuffer but don't put it in the que. // End of: Transform(chunk, controller){do stuff} // End of: if (textBuffer) // End of: flush(controller){do stuff} // End of: parameters for new TransformStream // End of: call to constructor new TransformStream // End of: parameters for pipeThrough - Split on lines // Parse JSON objects //End of: call to controller.enqueue function // End of: if (line) // End of: transform function // End of: parameter object for new TransformStream // End of: new TransformStream parameters // End of: parameters for .pipeThrough - Parse JSON objects // End of: .then callback function instruction for fetch // End of: .then callback parameters for fetch // Call to function which asks server for data. // Your object (value) will be here    // Insert a new row in the table. // Insert a new cell for each field to display and populate with data for that field. // End of: if(value){do stuff} // End of: the actual anonymous callback arrow function. // End of: .then callback after read function completes. // End of: function definition: function read(){do stuff} // Call the "read" function defined above when the submit query button is pressed.