Untitled

100%

✓ Published0🌍 Public

Last edited Sep 19, 2018

Created on Sep 19, 2018

This example demonstrates an asynchronous data-loading pattern where a loading message is displayed until car data arrives from a simulated API call. It uses `getCars()`, which returns a Promise that resolves after a 2-second delay with a hardcoded JSON array of car objects. The `generateReport` function filters cars by price and formats each into a readable string, then displays the result in an HTML element. The visualization relies on native JavaScript Promises, `JSON.parse`, and DOM manipulation via `document.getElementById`, with no D3 or other visualization libraries used.

AI-generated description

Tutorial

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading pattern: it fetches an in-memory array of car objects through `getCars()`, which returns a Promise after a simulated 2-second delay. While waiting, the page displays “Loading...”, then renders a filtered text report listing only cars priced under $2,000, formatted as “year make model: price” via `generateReport()` and `formatCar()`. The code uses D3 v7’s `select` import and vanilla DOM methods to update a `<pre>` element, showcasing how to combine Promises with D3 for dynamic content updates.

Iilsan142

89% match

Loading thumbnail…

Hello World

This example demonstrates asynchronous data loading and report generation from a hardcoded JSON array of car listings. The page initially displays “Loading...” in a large `<pre>` element, then after a 2-second delay, it renders a filtered list of cars priced under $2,000. The `getCars` function returns a promise that resolves with the parsed car data, while `generateReport` filters and formats the results using the `formatCar` helper. The application uses native JavaScript promises, `JSON.parse`, and DOM manipulation via `getElementById` to update the visible output.

Pp4pravin

87% match

Loading thumbnail…

test

This example demonstrates asynchronous data loading and text generation by fetching a hardcoded JSON array of used cars and displaying a filtered report of models under a price threshold. The page initially shows a loading message, then updates the DOM with formatted car details after a simulated two-second delay using a Promise. The code relies on native JavaScript features like `JSON.parse`, `setTimeout`, and ES6 modules, while the report formatting is handled by custom functions `formatCar` and `generateReport`. Styling is applied via a CSS file with an imported Google Font, and the visualization is presented as large plain text in a `<pre>` element.

Hhxiao-git

87% match

Loading thumbnail…

Cars Report

This example demonstrates asynchronous data loading and report generation from a static JSON dataset. It defines a `getCars` function that returns a Promise, simulating a two-second network delay, while the page displays “Loading...” during that wait. Once resolved, the `generateReport` function filters cars priced under $2,000, formats each entry using a template literal that concatenates year, make, model, and price, then writes the multi-line list into the DOM as text. The code relies on ES modules, `Promise` resolution, and array methods like `filter` and `map`.

Yyuanjunandrew

86% match

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading and report-generation workflow. It uses a static JSON array of five cars, each with a year, make, model, and price, loaded via a promise-based `getCars` function that simulates a two-second delay. After loading, the `generateReport` function filters cars under $2,000 and formats each as a text line using `formatCar`, with the result displayed in a `<pre>` element. The code highlights ES6 module imports, including local modules and Promise handling, without any visualization library.

VVinceVerspeek

86% match

Loading thumbnail…

Cars Report

A short tutorial demonstrates asynchronous data loading and report generation for a used-car dataset. A hardcoded JSON array is parsed and returned through a Promise with a two-second delay. The page displays a loading message, then uses `generateReport` to produce a text summary of the five vehicles, filtering or highlighting those priced at or above $2,000. The example showcases JavaScript objects, arrays, Promises, and ES modules, with the final output rendered into a preformatted HTML element.

Jjnic4416

86% match

Loading thumbnail…

Cars Report

This example demonstrates a car report application that filters a static JSON dataset of five cars by price and displays the results as a text listing. It uses asynchronous data loading via a custom Promise-based `getCars` function with a simulated two-second delay, then processes the data with the `generateReport` and `formatCar` helpers. The visualization is plain HTML text rendered into a `<pre>` element, updated through the DOM API, with no D3 or charting library involved.

Yyoghurtx

85% match

Loading thumbnail…

Cars Report with Promises

This example demonstrates asynchronous data handling by displaying a filtered list of cars below a price threshold. A loading message appears first, then after a two-second delay, the report renders in large text. The code uses JavaScript Promises with `getCars` and `setTimeout` to simulate a delayed API response, while `generateReport` chains `filter`, `map`, and `join` operations to format car details from a hardcoded JSON array. The `formatCar` module constructs each line.

Hhugomell

85% match