better example

json-gnome-exemple.ipynb

@@ -2,52 +2,202 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": 2,
    "id": "979a911a",
    "metadata": {},
    "outputs": [],
    "source": [
-    "class Person {\n",
+    "class Human {\n",
     "\n",
     "    constructor(name, age){\n",
     "        this.name = name;\n",
     "        this.age = age;\n",
     "    }\n",
     "    \n",
-    "    isMajor(){\n",
-    "        return this.age > 18;\n",
-    "    }\n",
-    "    \n",
     "    toJSON(){\n",
     "        return {\n",
-    "            type: \"Person\",\n",
+    "            type: \"Human\",\n",
     "            age: this.age,\n",
     "            name: this.name,\n",
     "        }\n",
     "    }\n",
-    "    \n",
     "}\n",
     "\n",
-    "function deserializeObject(object){\n",
-    "    if(object.type === \"Person\"){\n",
-    "        return new Person(object.name, object.age);\n",
+    "class Gnome{\n",
+    "    constructor(name, height){\n",
+    "        this.name = name;\n",
+    "        this.height = height;\n",
     "    }\n",
-    "    if(object.type === \"Gnome\"){\n",
-    "        return new Gnome(object.name, object.age);\n",
+    "\n",
+    "    toJSON(){\n",
+    "        return {\n",
+    "            type: \"Gnome\",\n",
+    "            name: this.name,\n",
+    "            height: this.height,\n",
+    "        }\n",
     "    }\n",
-    "    if(object.type === \"Luttin\"){\n",
-    "        return new Luttin(object.name, object.age);\n",
+    "}\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3ec0891a-3c4d-41b0-99d2-80260344274e",
+   "metadata": {},
+   "source": [
+    "### Objectif, sérialiser une liste de gnome ou d'human"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "84f50c8f-5f0a-42fc-ac45-36ddba69d18c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "const persons = [\n",
+    "    new Human(\"Boutros\", 89),\n",
+    "    new Human(\"Fares\", 12),\n",
+    "    new Gnome(\"Petit Pied\", 102),\n",
+    "    new Gnome(\"Grand Gaillard\", 135),\n",
+    "]\n",
+    "\n",
+    "\n",
+    "function serializePersons(persons){\n",
+    "    const personObjets = persons.map(person => person.toJSON())\n",
+    "    localStorage.setItem(\"persons.json\", JSON.stringify(personObjets));\n",
+    "}\n",
+    "\n",
+    "serializePersons(persons)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2b05a60d-974c-4e91-b9fb-c17e042445cd",
+   "metadata": {},
+   "source": [
+    "### Le statue de local storage est donc..."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "id": "4c46686d-9099-48f0-bcd0-1703eb385ade",
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "[{\"type\":\"Human\",\"age\":89,\"name\":\"Boutros\"},{\"type\":\"Human\",\"age\":12,\"name\":\"Fares\"},{\"type\":\"Gnome\",\"name\":\"Petit Pied\",\"height\":102},{\"type\":\"Gnome\",\"name\":\"Grand Gaillard\",\"height\":135}]\n"
+     ]
+    }
+   ],
+   "source": [
+    "console.log(localStorage.getItem(\"persons.json\"))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "dd8acf55-c0f6-4638-905e-12e8c80c8bbd",
+   "metadata": {},
+   "source": [
+    "### Plus bas, il s'agit de la logique pour deserialiser les personnes"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 22,
+   "id": "ef98a65f-8156-4f27-943c-d17b63111838",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "function deserializeHumanObject(humanObject){\n",
+    "    return new Human(humanObject.name, humanObject.age)\n",
+    "}\n",
+    "\n",
+    "function deserializeGnomeObject(gnomeObject){\n",
+    "    return new Gnome(gnomeObject.name, gnomeObject.height)\n",
+    "}\n",
+    "\n",
+    "function deserializePersonObject(person){\n",
+    "    if(person.type === \"Human\"){\n",
+    "        return deserializeHumanObject(person);\n",
+    "    }\n",
+    "    if(person.type === \"Gnome\"){\n",
+    "        return deserializeGnomeObject(person);\n",
     "    }\n",
     "}\n",
     "\n",
-    "function deserializeArray(lst){\n",
-    "    const ret = [];\n",
-    "    for(const e of lst){\n",
-    "        ret.push(deserializeObject(e));\n",
+    "\n",
+    "function deserializePersons(){\n",
+    "    const personObjects = JSON.parse(localStorage.getItem(\"persons.json\"));\n",
+    "    if(!personObjects){\n",
+    "        return []; // le cas ou il n'y a rien de sauvegarder dans \"persons.json\"\n",
     "    }\n",
-    "    return ret;\n",
+    "    return personObjects.map(deserializePersonObject)\n",
     "}"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b325ab23-811f-489e-a974-13f64a1ce9e0",
+   "metadata": {},
+   "source": [
+    "### Plus bas, voici comment deserialiser toutes les personnes du localstorage"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 20,
+   "id": "690b3db8-ad1d-433b-82dc-58afe4c97927",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[]"
+      ]
+     },
+     "execution_count": 20,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "deserializePersons()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6ca1e818-7bf9-4641-a219-db4a4ae56b79",
+   "metadata": {},
+   "source": [
+    "Cas special: deserializer un constenue de localstorage vide"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 21,
+   "id": "4fcdaa7e-0d7c-4bbb-8a70-ffb6586387fd",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[]"
+      ]
+     },
+     "execution_count": 21,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "localStorage.clear() // efface tout du localstorage.  Le cas du premier visiteur\n",
+    "deserializePersons()"
+   ]
   }
  ],
  "metadata": {