make the pages in spa.json file order unnecessary

by making loop and checking if "SPAname" in page object "in spa.json" is same to html element "SPAname" meta tag

main.js

@@ -7,15 +7,26 @@ function jsonRead(jsonpages, metatagArr){
     }).then((data)=>{
         function evenAdder(){
 
+            // to make No need to stick to static "page title" like: "SPAtitle", "page url" like: "SPAurl" or "page name" like: "SPAname", in your json file, name them as you want but be carefull to their order
             let SPAname = metatagArr[0];
             let SPAurl = metatagArr[1];
             let SPAtitle = metatagArr[2];
 
             let elements = document.querySelectorAll('[SPAname]');
+
+            // Loop through "SPAname" meta tag elemnts to add to them 'click' event
             elements.forEach((ele, index)=>{
                 ele.addEventListener('click',()=>{
-                    document.title = data[index][SPAtitle];
-                    window.history.pushState("","",data[index][SPAurl]);
+
+                    // change title, url   regardless of pages or json file objects order
+                    data.forEach((item, dataI)=>{
+                        if(data[dataI][SPAname] == ele.getAttribute("SPAname")){
+                            document.title = data[dataI][SPAtitle];
+                            window.history.pushState("","",data[dataI][SPAurl]);
+                        }
+                    })
+
+
                 })
             })
         }

spa.json

@@ -1,12 +1,4 @@
 [
-    {
-        "SPAnameR" : "home",
-        "SPAurlR": "../",
-        "SPAtitleR": "SPA APP | My Logic",
-        "Body": {
-
-        }
-    },
     {
         "SPAnameR" : "customers",
         "SPAurlR": "customers",
@@ -23,6 +15,15 @@
 
         }
     },
+    {
+        "SPAnameR" : "home",
+        "SPAurlR": "../",
+        "SPAtitleR": "SPA APP | My Logic",
+        "Body": {
+
+        }
+    },
+
     {
         "SPAnameR" : "notifications",
         "SPAurlR": "notifications",