Question

Define a JavaScript function named showBins which has one parameter which is a JSON blob (JSON encoding). The parameter encodes an array of Numbers. Your function should

• display the value at index 0 of the array in a text element whose id is "small",
• display the value at index 1 of the array in a text element whose id is "med", and
• display the value at index 2 of the array in a text element whose id is "large".

Answer 1

Here is code:

function showBins(blb) {
const reader = new FileReader();

// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
const text = e.srcElement.result;
let data = JSON.parse(text)
console.log(data[0]); // display "small"
console.log(data[1]); // display "med"
console.log(data[2]); // display "large"
  
});

// Start reading the blob as text.
reader.readAsText(blb);
}
var encode = function( s ) {
   var out = [];
   for ( var i = 0; i < s.length; i++ ) {
       out[i] = s.charCodeAt(i);
   }
   return new Uint8Array( out );
}

var str = JSON.stringify(["small", "med", "large"]);
console.log(str);
var data = encode(str);

var blob = new Blob([data], {
type: 'application/octet-stream'
});
showBins(blob);

Output: