Échec du chargement d'un fichier JSON avec data-json

Exemple d'échec du chargement d'un fichier JSON.

Échec du chargement d'un fichier JSON

Affiche un message d'erreur générique lorsque le chargement échoue.

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>Le fichier JSON spécifié dans l'URL du data-json est invalide.</p>
		</div>
	</template>
	<template data-tmpl-foo>
		<p data-p></p>
	</template>
</div>

Affichage des détails techniques à propos de l'échec de chargement

L'objet de donnée à transposer lorsqu'une erreur survient.

{
	error: "<Détails de l'erreur en anglais>",
	status: "<État ou la catégorie de l'erreur>",
	url: "<URL de la ressource ayant causé l'échec de chargement>",
	response: {
		text: "<Version textuelle de la ressource nettoyée, si applicable>",
		status: "<Numéro de l'état HTTP>",
		statusText: "<Texte de l'état HTTP en anglais>"
	}
}

Chargement d'un fichier JSON invalide

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>Échec de la lecture du fichier JSON.</p>
			<details>
				<summary>Détails techniques</summary>
				<dl class="dl-horizontal">
					<dt>Message d'erreur&nbsp;:</dt>
					<dd data-error lang="en"><dd>
					<dt>État&nbsp;:</dt>
					<dd data-status lang="en"><dd>
					<dt>URL&nbsp;:</dt>
					<dd data-url><dd>
					<dt>État HTTP&nbsp;:</dt>
					<dd><span data-http-status></span> <span data-http-status-text lang="en"></span><dd>
					<dt>Réponse HTTP&nbsp;:</dt>
					<dd><pre><code data-http-response></code></pre><dd>
				</dl>
			</details>
		</div>
	</template>
</div>

Chargement d'un URL introuvable

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>Échec de la lecture du fichier JSON.</p>
			<details>
				<summary>Détails techniques</summary>
				<dl class="dl-horizontal">
					<dt>Message d'erreur&nbsp;:</dt>
					<dd data-error lang="en"><dd>
					<dt>État&nbsp;:</dt>
					<dd data-status lang="en"><dd>
					<dt>URL&nbsp;:</dt>
					<dd data-url><dd>
					<dt>État HTTP&nbsp;:</dt>
					<dd><span data-http-status></span> <span data-http-status-text lang="en"></span><dd>
					<dt>Réponse HTTP&nbsp;:</dt>
					<dd><pre><code data-http-response></code></pre><dd>
				</dl>
			</details>
		</div>
	</template>
</div>
Date de modification :