fix loading of json data with different headings than used in data + …

…add demo, fixes #365
fiduswriter · Apr 11, 2024 · 75fe7f4 · 75fe7f4
1 parent 8c977ea
commit 75fe7f4
Show file tree

Hide file tree

Showing 6 changed files with 686 additions and 2 deletions.
diff --git a/docs/demos/27-load-json/additional_data.json b/docs/demos/27-load-json/additional_data.json
@@ -0,0 +1,306 @@
+[{
+  "name": "Lareina Jones",
+  "extension": "8642",
+  "city": "East Linton",
+  "start_date": "2009/07/08"
+},
+{
+  "name": "Joshua Weiss",
+  "extension": "2289",
+  "city": "Saint-Léonard",
+  "start_date": "2010/15/01"
+},
+{
+  "name": "Kiona Lowery",
+  "extension": "5952",
+  "city": "Inuvik",
+  "start_date": "2002/17/12"
+},
+{
+  "name": "Nina Rush",
+  "extension": "7567",
+  "city": "Bo‘lhe",
+  "start_date": "2008/27/01"
+},
+{
+  "name": "Palmer Parker",
+  "extension": "2000",
+  "city": "Stade",
+  "start_date": "2012/24/07"
+},
+{
+  "name": "Vielka Olsen",
+  "extension": "3745",
+  "city": "Vrasene",
+  "start_date": "2016/08/01"
+},
+{
+  "name": "Meghan Cunningham",
+  "extension": "8604",
+  "city": "Söke",
+  "start_date": "2007/16/02"
+},
+{
+  "name": "Iola Shaw",
+  "extension": "6447",
+  "city": "Albany",
+  "start_date": "2014/05/03"
+},
+{
+  "name": "Imelda Cole",
+  "extension": "4564",
+  "city": "Haasdonk",
+  "start_date": "2007/16/11"
+},
+{
+  "name": "Jerry Beach",
+  "extension": "6801",
+  "city": "Gattatico",
+  "start_date": "1999/07/07"
+},
+{
+  "name": "Garrett Rocha",
+  "extension": "3938",
+  "city": "Gavorrano",
+  "start_date": "2000/06/08"
+},
+{
+  "name": "Derek Kerr",
+  "extension": "1724",
+  "city": "Gualdo Cattaneo",
+  "start_date": "2014/21/01"
+},
+{
+  "name": "Shad Hudson",
+  "extension": "5944",
+  "city": "Salamanca",
+  "start_date": "2014/10/12"
+},
+{
+  "name": "Daryl Ayers",
+  "extension": "8276",
+  "city": "Barchi",
+  "start_date": "2012/12/11"
+},
+{
+  "name": "Caleb Livingston",
+  "extension": "3094",
+  "city": "Fatehpur",
+  "start_date": "2014/13/02"
+},
+{
+  "name": "Sydney Meyer",
+  "extension": "4576",
+  "city": "Neubrandenburg",
+  "start_date": "2015/06/02"
+},
+{
+  "name": "Lani Lawrence",
+  "extension": "8501",
+  "city": "Turnhout",
+  "start_date": "2008/07/05"
+},
+{
+  "name": "Allegra Shepherd",
+  "extension": "2576",
+  "city": "Meeuwen-Gruitrode",
+  "start_date": "2004/19/04"
+},
+{
+  "name": "Fallon Reyes",
+  "extension": "3178",
+  "city": "Monceau-sur-Sambre",
+  "start_date": "2005/15/02"
+},
+{
+  "name": "Karen Whitley",
+  "extension": "4357",
+  "city": "Sluis",
+  "start_date": "2003/02/05"
+},
+{
+  "name": "Stewart Stephenson",
+  "extension": "5350",
+  "city": "Villa Faraldi",
+  "start_date": "2003/05/07"
+},
+{
+  "name": "Ursula Reynolds",
+  "extension": "7544",
+  "city": "Southampton",
+  "start_date": "1999/16/12"
+},
+{
+  "name": "Adrienne Winters",
+  "extension": "4425",
+  "city": "Laguna Blanca",
+  "start_date": "2014/15/09"
+},
+{
+  "name": "Francesca Brock",
+  "extension": "1337",
+  "city": "Oban",
+  "start_date": "2000/12/06"
+},
+{
+  "name": "Ursa Davenport",
+  "extension": "7629",
+  "city": "New Plymouth",
+  "start_date": "2013/27/06"
+},
+{
+  "name": "Mark Brock",
+  "extension": "3310",
+  "city": "Veenendaal",
+  "start_date": "2006/08/09"
+},
+{
+  "name": "Dale Rush",
+  "extension": "5050",
+  "city": "Chicoutimi",
+  "start_date": "2000/27/03"
+},
+{
+  "name": "Shellie Murphy",
+  "extension": "3845",
+  "city": "Marlborough",
+  "start_date": "2013/13/11"
+},
+{
+  "name": "Porter Nicholson",
+  "extension": "4539",
+  "city": "Bismil",
+  "start_date": "2012/22/10"
+},
+{
+  "name": "Oliver Huber",
+  "extension": "1265",
+  "city": "Hannche",
+  "start_date": "2002/11/01"
+},
+{
+  "name": "Calista Maynard",
+  "extension": "3315",
+  "city": "Pozzuolo del Friuli",
+  "start_date": "2006/23/03"
+},
+{
+  "name": "Lois Vargas",
+  "extension": "6825",
+  "city": "Cumberland",
+  "start_date": "1999/25/04"
+},
+{
+  "name": "Hermione Dickson",
+  "extension": "2785",
+  "city": "Woodstock",
+  "start_date": "2001/22/03"
+},
+{
+  "name": "Dalton Jennings",
+  "extension": "5416",
+  "city": "Dudzele",
+  "start_date": "2015/09/02"
+},
+{
+  "name": "Cathleen Kramer",
+  "extension": "3380",
+  "city": "Crowsnest Pass",
+  "start_date": "2012/27/07"
+},
+{
+  "name": "Zachery Morgan",
+  "extension": "6730",
+  "city": "Collines-de-l'Outaouais",
+  "start_date": "2006/04/09"
+},
+{
+  "name": "Yoko Freeman",
+  "extension": "4077",
+  "city": "Lidköping",
+  "start_date": "2002/27/12"
+},
+{
+  "name": "Chaim Waller",
+  "extension": "4240",
+  "city": "North Shore",
+  "start_date": "2010/25/07"
+},
+{
+  "name": "Berk Johnston",
+  "extension": "4532",
+  "city": "Vergnies",
+  "start_date": "2016/23/02"
+},
+{
+  "name": "Tad Munoz",
+  "extension": "2902",
+  "city": "Saint-Nazaire",
+  "start_date": "2010/09/05"
+},
+{
+  "name": "Vivien Dominguez",
+  "extension": "5653",
+  "city": "Bargagli",
+  "start_date": "2001/09/01"
+},
+{
+  "name": "Carissa Lara",
+  "extension": "3241",
+  "city": "Sherborne",
+  "start_date": "2015/07/12"
+},
+{
+  "name": "Hammett Gordon",
+  "extension": "8101",
+  "city": "Wah",
+  "start_date": "1998/06/09"
+},
+{
+  "name": "Walker Nixon",
+  "extension": "6901",
+  "city": "Metz",
+  "start_date": "2011/12/11"
+},
+{
+  "name": "Nathan Espinoza",
+  "extension": "5956",
+  "city": "Strathcona County",
+  "start_date": "2002/25/01"
+},
+{
+  "name": "Kelly Cameron",
+  "extension": "4836",
+  "city": "Fontaine-Valmont",
+  "start_date": "1999/02/07"
+},
+{
+  "name": "Kyra Moses",
+  "extension": "3796",
+  "city": "Quenast",
+  "start_date": "1998/07/07"
+},
+{
+  "name": "Grace Bishop",
+  "extension": "8340",
+  "city": "Rodez",
+  "start_date": "2012/02/10"
+},
+{
+  "name": "Haviva Hernandez",
+  "extension": "8136",
+  "city": "Suwałki",
+  "start_date": "2000/30/01"
+},
+{
+  "name": "Alisa Horn",
+  "extension": "9853",
+  "city": "Ucluelet",
+  "start_date": "2007/01/11"
+},
+{
+  "name": "Zelenia Roman",
+  "extension": "7516",
+  "city": "Redwater",
+  "start_date": "2012/03/03"
+}]
diff --git a/docs/demos/27-load-json/index.html b/docs/demos/27-load-json/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Load JSON - simple-datatables</title>
+        <!-- DataTable Styles -->
+        <link rel="stylesheet" href="../dist/css/style.css">
+        <!-- Demo Styles -->
+        <link rel="stylesheet" href="../demo.css">
+    </head>
+    <body>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Load JSON</h2>
+
+        <table id="demo-table"></table>
+
+        <script type="module">
+            import {DataTable} from "../dist/module.js"
+
+            fetch("initial_data.json")
+                .then(response => response.json())
+                .then(data => {
+                    window.dt = new DataTable("#demo-table", {
+                        columns: [
+                            {
+                                // select the fourth column ...
+                                select: 3,
+                                // ... let the instance know we have datetimes in it ...
+                                type: "date",
+                                // ... pass the correct datetime format ...
+                                format: "YYYY/DD/MM",
+                                // ... sort it ...
+                                sort: "desc"
+                            }
+                        ],
+                        data: {
+                            headings: [
+                                {
+                                    text: "Name",
+                                    data: "name"
+                                }, {
+                                    text: "Ext.",
+                                    data: "extension"
+                                }, {
+                                    text: "City",
+                                    data: "city"
+                                }, {
+                                    text: "Start date",
+                                    data: "start_date"
+                                }
+                            ],
+                            data
+                        }
+        })
+
+                    fetch("additional_data.json")
+                        .then(response => response.json())
+                        .then(data => window.dt.insert(data))
+                })
+        </script>
+    </body>
+</html>