small fixing

web/app/src/App.js

@@ -49,6 +49,36 @@ function App() {
     const axios = require('axios').default;
     var center = {display: 'flex', justifyContent: 'center', alignItems: 'center'}
 
+    /** Function used to hide the input form */
+    function hideForm() {
+        setFormState('hide')
+    }
+
+    /** Function used to show bookData input form */
+    function changeFormStateBook() {
+        setRenderState(false)
+        if (formState === 'hide') {
+            setFormState('showBook')
+        } else {
+            setFormState('hide')
+        }
+    }
+
+    /** Function used to show authorData input form */
+    function changeFormStateAuthor() {
+        setRenderState(false)
+        if (formState === 'hide') {
+            setFormState('showAuthor')
+        } else {
+            setFormState('hide')
+        }
+    }
+    
+    /** Function used to set Dialog visible, which is called when a response is received */
+    function showDialog() {
+        setDialogState(true)
+    }
+
     /** Function used in GET Requests */
     function get() {
         axios.get('http://127.0.0.1:5000/api/' + queryStr)
@@ -58,9 +88,9 @@ function App() {
             showDialog()
             document.getElementById('dialog').value = response.status + ":\n" + response.statusText
             if (queryStr.includes('book')) {
-                setDataState(response.data['books'][0])
+                setDataState(response.data['books'])
             } else {
-                setDataState(response.data['authors'][0])
+                setDataState(response.data['authors'])
             }
             setRenderState(true)
         })
@@ -108,36 +138,6 @@ function App() {
         setDataState(authorData)
         return authorData
     }
-    
-    /** Function used to hide the input form */
-    function hideForm() {
-        setFormState('hide')
-    }
-
-    /** Function used to show bookData input form */
-    function changeFormStateBook() {
-        setRenderState(false)
-        if (formState === 'hide') {
-            setFormState('showBook')
-        } else {
-            setFormState('hide')
-        }
-    }
-
-    /** Function used to show authorData input form */
-    function changeFormStateAuthor() {
-        setRenderState(false)
-        if (formState === 'hide') {
-            setFormState('showAuthor')
-        } else {
-            setFormState('hide')
-        }
-    }
-    
-    /** Function used to set Dialog visible, which is called when a response is received */
-    function showDialog() {
-        setDialogState(true)
-    }
 
     /** Function used in PUT requests */
     function put() {

web/app/src/Components/ElementDisplay.js

@@ -3,18 +3,35 @@ import MUIDataTable from "mui-datatables";
 /** MUI dataTable component, used for rendering received response */
 const ElementDisplay = (props) => {
 
-    var fields = Object.keys(props.data)
-    var values = Object.values(props.data)
-    console.log(Object.values(props.data))
-    console.log(Object.keys(props.data))
+    var list = props.data
+    if (list.length <= 0) {
+        return (
+            <MUIDataTable 
+            title={"Data Table"}
+            data={[]}
+            columns={['Fields', 'Values']}
+            options={{}}
+        />
+        )
+    }
+    var fields = Object.keys(list[0])
+    var values = []
+    for (var key in list){
+        if (list.hasOwnProperty(key)) {
+            values.push(Object.values(list[key]))
+        }
+    }
+    console.log(fields)
+    console.log(values)
+    console.log(list)
     const columns = fields
-    const data = [values]
+    const data = values
     const options = {
         'responsive':'vertical'
     }
     return (
         <MUIDataTable 
-            title={"GET Data"}
+            title={"Data Table"}
             data={data}
             columns={columns}
             options={options}