I am trying to download the large json data.
But it leads to Uncaught RangeError: Invalid string length.
Pls help to solve this problem,Thanks in advance.
Here is the Jsfiddle : http://jsfiddle.net/sLq3F/456/
How to solve Uncaught RangeError when download large size json
Asked Answered
You can use fetch(), Response.body.getReader() which returns a ReadableStream, TextDecoder(), Blob(), URL.createObjectURL().
Note, at device having limited RAM or low available disk space, after clicking Save at Save File dialog four minutes and twenty seconds 4:20 elapsed before the Save File dialog closed, followed by an additional one minute and thirty seconds 1:30 before the .crdownload extension was removed from the file at file manager GUI. During the first 4:20 period where the file is downloading to filesystem and the Save File dialog is visible the mouse pointer is movable, though the UI is temporarily unresponsive to clicks or attempts to change tabs. When the Save File dialog closes and the the file is still downloading to filesystem, having extension .crdownload the UI returns to normal functionality.
At the conclusion of the process described above the file was successfully downloaded to local filesystem having a total size of 189.8 MB (189,778,220 bytes).
<!DOCTYPE html>
<html>
<head>
<style>
code {
color:navy;
background-color:#eee;
padding:2px;
}
</style>
</head>
<body>
<button>Request File</button><br>
<progress min="0" max="189778220" value="0"></progress>
<output></output>
<br><br>
<label></label>
<script>
var url = "https://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json";
var button = document.querySelector("button");
var progress = document.querySelector("progress");
var label = document.querySelector("label");
var output = document.querySelector("output");
var request = (url) => {
label.innerHTML = `Requesting <code>${url}</code> at ${new Date()}.<br><br>`;
return fetch(url)
.then(response => response.body.getReader())
.then(reader => {
var decoder = new TextDecoder();
var json = "";
label.innerHTML += `Request successful.<br><br>Reading request body at ${new Date()}.<br><br>`;
return reader.read().then(function processData(result) {
if (result.done) {
// do stuff when `reader` is `closed`
return reader.closed.then(function() {
// return `json` string
return json;
});
};
json += decoder.decode(result.value);
output.innerHTML = ` ${json.length} of ${progress.max} bytes read`;
progress.value = json.length;
return reader.read().then(processData)
})
.then(function(data) {
var message = `Reading of <code>${url}</code> complete at ${new Date()}. <br><br>`
+ `${data.length} total bytes read. `
+ `Please allow up to 4 minutes for file to download `
+ `to filesystem after clicking <code>Save</code>.<br><br>`;
label.innerHTML += message;
var blob = new Blob([data], {
type: "application/json"
});
var file = URL.createObjectURL(blob);
var a = document.createElement("a");
a.download = "citylots.json";
a.href = file;
document.body.appendChild(a);
a.click();
var closeBlob = (e) => {
window.removeEventListener("focus", closeBlob);
blob.close();
URL.revokeObjectURL(file);
};
window.addEventListener("focus", closeBlob);
return message.replace(/<[^>]*>/g, "");
})
.catch(function(err) {
console.log("err", err)
})
});
}
var handleRequest = (e) => {
button.setAttribute("disabled", "disabled");
request(url).then(function(message) {
console.log(message);
button.removeAttribute("disabled");
})
};
button.addEventListener("click", handleRequest);
</script>
</body>
</html> When i click the button.it seems to load but after taking some time it leads to DevTools was disconnected from the page.Pls help me,.. –
Palate
@Palate After clicking
Save it took over 4 minutes for Save File dialog to close. An additional minute and a half elapsed before the file write to local filesystem completed. How much RAM is available at the device you tried at? –
Leprosy I have Installed memory(RAM) 3GB –
Palate
Which browser did you try
javascript at? –
Leprosy Which version of chrome? –
Leprosy
Used chromium 52 to test
javascript at Answer, here. The file was successfully downloaded several times. –
Leprosy Ok i try to use chromium 52 version. Thanks for reply,. –
Palate
@Palate Note, the latest version of chromium, when last checked, is at version 54 or 55, depending on
beta or dev build –
Leprosy @Palate Note, the 4-6 minute delay apparently has to do with
RAM and available disk space. Tried javascript at Answer at a different device where UI was not temporarily unresponsive. Download of file occurred without delay within seconds. –
Leprosy I guess you would need to loop through something in the JSON file and split it up into more manageable strings.
Tom
Do you have an example snippet the JSON file?
Do you have a server running on PHP?
if you do, I believe you must absolutely check your PHP.ini file or run a phpinfo page because php settings does limit the size of files transfer even if it isnt an external request. It could do that in other languages but I never had this problem except on PHP.
P.S. I did not see the size of the file
I think your json file is one of the "TOO BIG FOR JSON" scenarios. you know, if json file have so many records ( to be exact, based on a test, 100000 records make the browser hang and more then that failed to load in many browsers) its not recommend to use.
you can read this article for more information : HOW BIG IS TOO BIG FOR JSON?
© 2022 - 2024 — McMap. All rights reserved.
JSONfrom server side not from JQuery. – Divertissement