---
{
	"title": "Échec du chargement d'un fichier JSON avec data-json",
	"language": "fr",
	"description": "Exemple d'échec du chargement d'un fichier JSON.",
	"tag": "data-json",
	"parentdir": "wb-data-json",
	"altLangPage": "load-failure-en.html",
	"dateModified": "2023-07-12"
}
---
<nav>
	<ul>
		<li><a href="data-json-fr.html">Data JSON</a></li>
		<li><a href="template-fr.html">Gabarit HTML 5</a></li>
		<li><a href="conditional-fr.html">Gabarit conditionel</a></li>
	</ul>
</nav>

<p>{{ page.description }}</p>

<h2>Échec du chargement d'un fichier JSON</h2>

<p>Affiche un message d'erreur générique lorsque le chargement échoue.</p>

<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>

<details>
	<summary>Code</summary>
	<pre><code>&lt;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" }
	]
}'>
	&lt;template data-tmpl-fail>
		&lt;div class="alert alert-danger" role="status">
			&lt;p>Le fichier JSON spécifié dans l'URL du data-json est invalide.&lt;/p>
		&lt;/div>
	&lt;/template>
	&lt;template data-tmpl-foo>
		&lt;p data-p>&lt;/p>
	&lt;/template>
&lt;/div></code></pre>
</details>

<h2>Affichage des détails techniques à propos de l'échec de chargement</h2>

<p>L'objet de donnée à transposer lorsqu'une erreur survient.</p>
<pre><code>{
	error: "&lt;Détails de l'erreur en anglais>",
	status: "&lt;État ou la catégorie de l'erreur>",
	url: "&lt;URL de la ressource ayant causé l'échec de chargement>",
	response: {
		text: "&lt;Version textuelle de la ressource nettoyée, si applicable>",
		status: "&lt;Numéro de l'état HTTP>",
		statusText: "&lt;Texte de l'état HTTP en anglais>"
	}
}</code></pre>

<h3>Chargement d'un fichier JSON invalide</h3>

<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>

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

<h3>Chargement d'un URL introuvable</h3>

<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>

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