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.

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

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

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>
Date modified: