Skip to main content
100%

Gist 30cbfbfa6a3cb42eef6beba8d35b62a1

✓ Published0🌍 Public
Aalexfinnarn
Last edited Oct 25, 2018
Created on Oct 25, 2018

This example demonstrates a browser-based utility for saving JSON data as a downloadable file. It shows how to serialize a JavaScript object into a formatted JSON string, wrap it in a Blob, and trigger a client-side download. The code uses the Blob constructor with the `application/json` MIME type, feature-detects the HTML5 `download` attribute, and creates a temporary anchor element with `URL.createObjectURL` to initiate the download. It also includes a fallback for Internet Explorer 10+ using `navigator.msSaveBlob`. The filename is fixed as `directory.json`, and the data structure comes from the `finalData` parameter passed to the `downloadFile` function.

AI-generated description

Similar vizzes

Loading thumbnail…

a simple function to export a JSON file

This example demonstrates a minimal JavaScript function that triggers a browser save dialog for any JSON data, producing a downloadable file with a user-specified name. The code converts the input data into a formatted string using `JSON.stringify`, wraps it in a Blob with the `application/json` MIME type, and creates an object URL via `URL.createObjectURL`. It then programmatically clicks a temporary anchor element with a `download` attribute and cleans up the element afterward. The function accepts arbitrary data, such as arrays or text, as shown in the comment example `saveJSON([1,2,3], 'anArray')`.

Aamundo
82% match
Loading thumbnail…

save lunr.js state

This example demonstrates how to save the complete internal state of a lunr.js search index to a downloadable JSON file. The code defines a console utility that serializes the index using `JSON.stringify` with pretty-printing, then creates a Blob with `text/json` MIME type. It uses the browser’s `URL.createObjectURL` to generate a temporary download link, which is programmatically clicked via a `MouseEvents`-dispatched event. The final line calls `lunr_index.toJSON()` to capture the index’s serialized data into `_indexed.json`. This approach relies on native browser APIs for file generation rather than external libraries.

PPhilippe Rivière
67% match
Loading thumbnail…

Download SVG

This example demonstrates how to trigger a file download of an SVG image directly from a browser using a data URL. The page displays a large download icon, and clicking it invokes a JavaScript function that creates a temporary anchor element with the SVG data URL as its `href` and `download` attribute, then programmatically clicks it to save the file as `test.svg`. The SVG content is embedded as a URI-encoded string, representing a simple smiley-face graphic. The implementation uses plain JavaScript DOM APIs, including `document.createElement` and `setAttribute`, and references Font Awesome’s `fa-download` icon for the visual button.

CCurran Kelleher
64% match
Loading thumbnail…

Gist 58ea1113852500390cf7cb5f0bd2d88c

This example demonstrates two JavaScript methods for converting between JavaScript objects and JSON format. It uses the native `JSON.parse()` function to transform a JSON string into an object, then accesses its properties to display "John, 30" via `document.getElementById().innerHTML`. A second example uses `JSON.stringify()` to convert a JavaScript array of names into a JSON string for output. The code relies on standard JavaScript APIs and renders results directly into HTML elements, illustrating basic data serialization without external libraries.

MMistyBlunch
63% match
Loading thumbnail…

Gist 7571798

This example shows a file-reading utility that loads either image or text files into the browser using the HTML5 File API. It creates a FileReader instance and wraps its asynchronous operations in a jQuery Deferred object, returning a promise that resolves with the file’s content. For images, the reader uses `readAsDataURL` to produce a base64-encoded data URL; for all other file types, it uses `readAsText` to retrieve the raw string. The code handles load and error events, rejecting the promise on failure.

Aamundo
60% match
Loading thumbnail…

Gist 7233762

This example shows a JavaScript application skeleton converted to use AJAX, with the updated files provided as a gist. The code demonstrates an asynchronous data-loading pattern, fetching external resources via `XMLHttpRequest` or a similar AJAX mechanism. It relies on standard browser APIs for handling responses and updating the page content dynamically. The visualization aspect is minimal, focusing instead on the structural change from a static app to one that retrieves data on demand. The author lists the modified files and includes instructions for downloading the original skeleton, making the gist a practical exercise in refactoring for asynchronous behavior.

EElaineYu
60% match
Loading thumbnail…

highlight.js

This example demonstrates how to display a JavaScript object as formatted, syntax-highlighted code on a web page. It uses the highlight.js library to apply color-coded styling to a JSON string representation of a small dataset, while D3 v4 populates the `<code>` element with the data. The code first defines an array of objects with name and size properties, then uses `d3.select` and `json.stringify` to insert the formatted data into the page. The visible result is a clean, readable code block, though no interactive visualization is present.

EEfratVil
59% match
Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu
59% match