Converting Blob to array - javascript

I'm trying to convert the Blob data I receive to an array as follows:
var xhr = new XMLHttpRequest();
xhr.open('GET', "chrome://favicon/http://www.cnn.com/", true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
var favicon = new Uint8Array(this.response);
}
};
xhr.send();
But the line:
new Uint8Array(this.response);
doesn't result in an array. What's wrong here?

Figured it out:
var xhr = new XMLHttpRequest();
xhr.open('GET', "chrome://favicon/http://www.cnn.com/", true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
// get binary data as a response
//var blob = this.response;
//var favicon = new Uint8Array(this.response);
var reader = new FileReader();
reader.onload = function (e) {
mDataToTransmit.favicon = e.target.result;
transmitData();
};
reader.readAsDataURL(this.response);
}
};
xhr.send();

Related

How to get values from JSON XMLHttpRequest?

I am new to web development, and I am using a XMLHttpRequest() in JavaScript to get data from an api. I am trying to create variables from the data but am getting an error when I try to do the following. Does anyone know what is wrong with the line var data1 = data["data1"];?
<script>
const Http = new XMLHttpRequest();
const url = "www.mytestapi.com/response.json";
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
var json = JSON.parse(Http.responseText)
var data = json.Data
var data1 = data["data1"]; //issue caused here
}
<script>
you don't need to parse response data, data is parsed already , try this
const xhr = new XMLHttpRequest();
const url = "www.mytestapi.com/response.json";
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = () => {
console.log("load - "+ JSON.stringify(xhr.response));
var data = xhr.response;
var data1 = data["data1"]
}
xhr.onerror = () => {
console.log("error status - " + xhr.status);
}
xhr.send()

Convert a string to multi-dimensional array in javascript

This is returned by the REST API: [[5671, 204], [5673, 192], [5674, 120], [5683, 120], [5684, 192], [5685, 204]]
when i am doing typeof i am getting string for above in javascript . i want to convert it to a multi dimensional array.
<script type="text/javascript">
const Http = new XMLHttpRequest();
const url='/hello/get_pw_status';
Http.open("GET", url);
Http.send();
var resp;
Http.onreadystatechange = (e) => {
console.log(Http.responseText);
document.getElementById("demo").innerHTML =Http.responseText;
console.log(typeof Http.responseText);
var pw_data = [];
pw_data=Http.data;
console.log(pw_data);
}
Use JSON.parse to convert the array in the response string.
<script type="text/javascript">
const Http = new XMLHttpRequest();
const url='/hello/get_pw_status';
Http.open("GET", url);
Http.send();
var resp;
Http.onreadystatechange = (e) => {
var multiDimentionalArray;
if(typeof Http.responseText == "string") {
multiDimentionalArray = JSON.parse(Http.responseText);
}
conosle.log(multiDimentionalArray);
}

Get the txt file into the push() method?

Please help me!
I have Script:
var titles =[];
titles.push('I want file txt in here');
I can not get the txt file into the titles.push, so I need some help!
function readTextFile(){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "text.txt", false);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200 || rawFile.status == 0){
var allText = rawFile.responseText;
console.log(allText);
}
}
}
rawFile.send(null);
}
I do not have a text file ready to show so I used what you should be reading about XMLHttpRequest.responseText you do not want to use onreadystatechange but maybe xhr.onload I left some console.log()s in the code so you can play around with it.
var titles =[];
titles.push('I want file txt in here');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseText', true);
xhr.responseType = 'text';
xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
//console.log(xhr.response);
//console.log(xhr.responseText);
// not needed but do not want to push the entire page
// to titles so lets find just one title
var parser = new DOMParser();
var doc = parser.parseFromString(xhr.responseText, "text/html");
var title = doc.querySelector('h1');
// console.log(title);
titles.push(title);
logTitles();
}
}
};
xhr.send(null);
function logTitles() {
console.log(titles);
};

IE 11 - Issue In Displaying Byte Array Image

I have used the following code
$scope.download = function() {
var request = new XMLHttpRequest();
request.responseType = "arraybuffer";
request.onload = function() {
var blob = new Blob([request.response], {type: "image/png"})
var urlCreator = window.URL || window.webkitURL;
$scope.apiImgSrc = urlCreator.createObjectURL( blob );
angular.element("#apiImage").attr('src', $scope.apiImgSrc);
}
request.open("POST", "/customer/downloadlogo");
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.send(JSON.stringify({
"customerSeq": 1000,
"userId": "TEST-USER"
}));
}
It is not working in IE 11 and returns the error as the following image

empty responseText from xmlhttprequest

I'm upload an file using ajax,why the responseText from xmlhttprequest.responseText is returned empty?
My code:
req = new XMLHttpRequest();
req.file = file;
req.addEventListener('change', changeProgress);
req.onreadystatechange =
function() {
if(this.readyState == 4) {
//etc..
alert(req.responseText);
}
};
req.open('POST','/upload',true);
req.send(file);
Uploading files in XMLHttpRequest object is not supported for security reasons
EDIT: This is, however, possible with XMLHttpRequest 2
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
// Listen to the upload progress.
var progressBar = document.querySelector('progress');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}
};
xhr.send(blobOrFile);
}
upload(new Blob(['hello world'], {type: 'text/plain'}));

Categories