Failure to load a JSON file with data-json
Example of failing to load a JSON file.
Failing to load a JSON file
Show a generic message when fetching a JSON file fails.
The JSON file specified in the data-json URL is invalid.
Code
<div data-wb-json='{ "url": "demo/bad-json-content.json", "fail": { "template": "[data-tmpl-fail]", "mapping": null }, "streamline": true, "template": "[data-tmpl-foo]", "mapping": [ { "selector": "[data-p]", "value": "/foo" } ] }'> <template data-tmpl-fail> <div class="alert alert-danger" role="status"> <p>The JSON file specified in the data-json URL is invalid.</p> </div> </template> <template data-tmpl-foo> <p data-p></p> </template> </div>Show technical details about the failure
Data object to map when an error occurs.
{ error: "<Details of the error in English>", status: "<Status or category of the error>", url: "<URL of the failed resource>", response: { text: "<Text version of the resource sanitized, if applicable>", status: "<HTTP status number>", statusText: "<HTTP status text in English>" } }Fetched an invalid JSON file
Failed to read the JSON file.
Technical details
- Error message:
- Status:
- Url:
- HTTP status:
- HTTP response
Code
<div data-wb-json='{ "url": "demo/bad-json-content-2.json", "fail": { "template": "template", "mapping": [ { "selector": "[data-error]", "value": "/error" }, { "selector": "[data-status]", "value": "/status" }, { "selector": "[data-url]", "value": "/url" }, { "selector": "[data-http-status]", "value": "/response/status" }, { "selector": "[data-http-status-text]", "value": "/response/statusText" }, { "selector": "[data-http-response]", "value": "/response/text", "encode": true } ] } }'> <template> <div class="alert alert-danger" role="status"> <p>Failed to read the JSON file.</p> <details> <summary>Technical details</summary> <dl class="dl-horizontal"> <dt>Error message:</dt> <dd data-error><dd> <dt>Status:</dt> <dd data-status><dd> <dt>Url:</dt> <dd data-url><dd> <dt>HTTP status:</dt> <dd><span data-http-status></span> <span data-http-status-text></span><dd> <dt>HTTP response</dt> <dd><pre><code data-http-response></code></pre><dd> </dl> </details> </div> </template> </div>Fetched url not found
Failed to read the JSON file.
Technical details
- Error message:
- Status:
- Url:
- HTTP status:
- HTTP response
Code
<div data-wb-json='{ "url": "demo/notfound-json-content.json", "fail": { "template": "template", "mapping": [ { "selector": "[data-error]", "value": "/error" }, { "selector": "[data-status]", "value": "/status" }, { "selector": "[data-url]", "value": "/url" }, { "selector": "[data-http-status]", "value": "/response/status" }, { "selector": "[data-http-status-text]", "value": "/response/statusText" }, { "selector": "[data-http-response]", "value": "/response/text", "encode": true } ] } }'> <template> <div class="alert alert-danger" role="status"> <p>Failed to read the JSON file.</p> <details> <summary>Technical details</summary> <dl class="dl-horizontal"> <dt>Error message:</dt> <dd data-error><dd> <dt>Status:</dt> <dd data-status><dd> <dt>Url:</dt> <dd data-url><dd> <dt>HTTP status:</dt> <dd><span data-http-status></span> <span data-http-status-text></span><dd> <dt>HTTP response</dt> <dd><pre><code data-http-response></code></pre><dd> </dl> </details> </div> </template> </div>Page details
- Date modified: