Failed with expected a LIST ; where value is "[xxxxx]" — VizHub

SimilarExport ZIP

100%

Failed with expected a LIST ; where value is "[xxxxx]"

✓ Published0🌍 Public

Last edited Sep 6, 2018

Created on Sep 6, 2018

This example demonstrates a JSON-decoding failure in an Elm application that renders resume content. The visualization shows how the Elm runtime reports an error when JavaScript sends data that does not match the expected decoder structure. The code uses the Elm `Decode` library with a `Decode.list` decoder for the resume sections, and `Decode.string` for each required field. The JavaScript side employs `Elm.Main.init` and a port named `onFetchingData` to pass a JSON stringified array with heading, class, and data properties, but the decoder expects a LIST and fails with the message "Failed with expected a LIST ; where value is '[xxxxx]'".

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d48666ba0aaed38491ff5ccd5214c9a2

This example is a resume presented as a single-page, data-driven document. It shows the candidate's professional summary, technical skills, project history, and education. The visualization is built with React and leverages the D3.js library to create a custom layout for the resume's content. The code uses `d3.forceSimulation` to position the various sections, likely creating a network or bubble-like arrangement. The data is sourced directly from the resume text, which is parsed and rendered through a React component, demonstrating a non-traditional, interactive approach to displaying structured personal information.

Loading thumbnail…

Elm HTTP Example w/ability to change input

This example demonstrates an Elm application that fetches and displays random GIFs from the Giphy API, with a text input allowing users to change the search topic. The interface shows a button to request another GIF and an image element that updates with each new result. The code uses Elm’s `Http` module with a `Json.Decode` pipeline to extract the `image_url` field from the API’s JSON response, and Bootstrap CDN styles via the `Bootstrap.CDN` and `Bootstrap.Grid` modules. The application’s architecture follows Elm’s standard Model-Update-View pattern, managing state through messages like `MorePlease` and `Change`.

CCliffordAnderson

Loading thumbnail…

Gist a18bad73d3fd33da75903d11c908bef1

This example presents a static resume styled as a single-page document, using a clean typographic layout to organize professional experience, skills, and education. The visualization is built with React, though the core rendering relies on standard HTML and CSS for text hierarchy and spacing. The code does not employ any data-driven JavaScript libraries like D3.js or canvas APIs; instead, it displays the resume content directly from a local Markdown-like structure. The result is a straightforward, readable presentation of the candidate’s career history, with no interactive or animated elements.

Loading thumbnail…

Gist e9ca6a4ec4fe6c3bee98

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

Loading thumbnail…

ndjson-to-file

This example explores the challenge of writing large JSON datasets to disk. It demonstrates a failing workaround that serializes data in chunks to multiple files, and two broken attempts at using streaming libraries. The code uses `JSON.stringify` with `fs.writeFileSync` for the chunked approach, and attempts to use the `ndjson` and `JSONStream` libraries with `fs.createWriteStream` and piping for streaming output. The example highlights the difficulty of handling big data blobs that crash `JSON.stringify` and the struggle to implement a proper streaming solution.

Loading thumbnail…

let's make a list from a data file! (json)

This example renders a simple bulleted list from a JSON data file using D3.js. It demonstrates loading external data with `d3.json` and binding an array of strings to list items via `selectAll('li').data()` and the `.enter().append('li')` pattern. The data file contains repeated "one" strings and a final phrase, which are displayed as text inside each `<li>` element. The page consists of a bare `<ul>` element, with all list creation handled programmatically in JavaScript.

Loading thumbnail…

HTML Starter

This example demonstrates how to load and display a list of car descriptions, filtering for vehicles priced under 80,000. The page initially shows a "Loading the data..." message, then renders a preformatted text block with details about each car. The React application (`source: elianalien`) uses a `carsLoader` promise to simulate a four-second data fetch, parsing a JSON array of car objects. The `report` function filters and formats the data using the `formatCar` template, writing the output to the `message-element` via native JavaScript DOM manipulation.

Loading thumbnail…

Fork of let's make a list from a data file! (json)

This example displays a simple bulleted list of strings loaded from a JSON data file. It shows how D3 can fetch external data and use it to build DOM elements. The code uses the `d3.json` method to load `data.json` and then leverages D3's selection API to create `<li>` elements inside a `<ul>` via `selectAll`, `data`, and `enter`. Styling is minimal, with a body reset and a `.poop` class defined in CSS but not applied.

Rrobinjohn.inc@gmail.com