Leveraging JavaScript to store XHR documents

Question

Leveraging JavaScript to store XHR documents

My goal is to save a JSON file that is retrieved on a page after logging in with a POST request. Since there is no available API, I am looking to download the response of a script called during the page load as a JSON file using Greasemonkey.

The page I'm referring to is located at domain.com/map, which triggers domain.com/map/script during its loading:

<script type="text/javascript" charset="utf-8"> function open() {$.ajax{{ url: "/script", type: "POST", dataType: "json",), [...] }); }; function functionname(value){ [...] }; open();

. The response from domain.com/map/script contains the JSON data that I want to save (either locally or preferably using FTP).

javascript xmlhttprequest greasemonkey

Answer 1

Answer №1

Here is the complete demo code:

(function (fetch, console) {

    fetch('https://api.stackexchange.com/2.2/questions/36132760?site=stackoverflow')
        .then(res => res.json())
        .then(data => console.save(data));

    console.save = function (data, filename) {

            if (!data) {
                console.error('Console.save: No data')
                return;
            }

            if (!filename) filename = 'console.json'

            if (typeof data === "object") {
                data = JSON.stringify(data, undefined, 4);
            }

            var blob = new Blob([data], {type: 'text/json'}),
                e    = document.createEvent('MouseEvents'),
                a    = document.createElement('a');

            a.download = filename;
            a.href = window.URL.createObjectURL(blob);
            a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':');
            e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
    };

}).call(this, window.fetch, window.console || {});

For more information, visit devtools-snippets#console-save

Answer 2

Here is the complete demo code:

(function (fetch, console) {

    fetch('https://api.stackexchange.com/2.2/questions/36132760?site=stackoverflow')
        .then(res => res.json())
        .then(data => console.save(data));

    console.save = function (data, filename) {

            if (!data) {
                console.error('Console.save: No data')
                return;
            }

            if (!filename) filename = 'console.json'

            if (typeof data === "object") {
                data = JSON.stringify(data, undefined, 4);
            }

            var blob = new Blob([data], {type: 'text/json'}),
                e    = document.createEvent('MouseEvents'),
                a    = document.createElement('a');

            a.download = filename;
            a.href = window.URL.createObjectURL(blob);
            a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':');
            e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
    };

}).call(this, window.fetch, window.console || {});

For more information, visit devtools-snippets#console-save

Leveraging JavaScript to store XHR documents

Answer №1

Similar questions

Issue with knockout binding not functioning properly when using inline editing

Using Javascript, retrieve a custom attribute specific to a checkbox option

"Embedding a JSON object within a script tag in NextJS: A step-by-step

What are some ways to handle JavaScript exceptions effectively?

After changing the page, the Facebook JS SDK fails to function properly when using JQueryMobile

Trying to update React and Electron, encountering the error message "global is not defined"

The 'xxx' type is lacking various properties compared to the 'xxx[]' type, such as length, pop, push, concat, and many others

The useEffect function is repeatedly making API calls within a component, despite not having any dependencies specified

Issues with React Router functionality on a live production site are causing complications

Passing a variable via routes using Express

Generating and populating ENUM arrays with Sequelize seeding

Loop through the JSONP object to display its properties

A guide to extracting row and column information from tables using div tags

Encountered npm error! Issue arose while resolving: [email protected] npm error! Detected: [email protected] during npm installation

Dealing with multiple v-on:click events in Vue.js

spinning in relation to another object

Are there any downsides to utilizing the jQuery Load function?

Troubleshooting problem with autoplay on a Parallax Content Slider in IE8

Steps for integrating Stanford's NLP into a web application

The client using socket.io is receiving events for "double plus one"