I made it! Objects from symfony are displayed in vuejs

Steelwix · Mar 7, 2023 · 51c133f · 51c133f
1 parent b15b4fa
commit 51c133f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/assets/vue/controllers/Home.vue b/assets/vue/controllers/Home.vue
@@ -5,7 +5,8 @@
         <div class="row">
             <div class="col-12 text-center">
                 <h1>PHP HUB</h1>
-                <p>All services, methods and templates made for you, <span v-if="user.username">{{ user.username
+                <p>All services, methods and templates made for you, <span v-if="user">{{
+                    user.username
                 }}</span><span v-else>dude</span></p>
             </div>
 
@@ -14,7 +15,6 @@
                 <div class="slider">
 
                     <!-- slide 1 -->
-
                     <div class="slider-items">
                         <div v-for="service in services">
                             <div class="slide card bg-dark col-12 mh-500 d-flex align-items-stretch">
@@ -33,6 +33,8 @@
 
                     </div>
 
+
+
                     <!-- Control buttons -->
                     <button class="btn btn-next"> <i class="bi bi-arrow-right-circle-fill"></i> </button>
                     <button class="btn btn-prev">
@@ -43,12 +45,24 @@
     </div>
 </template>
 
-<script setup>
-const props = defineProps({
-    user: Object,
-    services: Array
-});
+<script>
+export default {
+    props: {
+        services: Array,
+        user: Object
+    },
+    created() {
+        console.log(this.services)
+        console.log(JSON.parse(this.user))
+    },
+
+    data() {
+        return {
+            services: this.services,
+            user: JSON.parse(this.user)
 
+        }
+    }
+}
+</script>
 
-console.log(props.user)
-</script>
diff --git a/src/Controller/DefaultController.php b/src/Controller/DefaultController.php
@@ -16,14 +16,24 @@
 class DefaultController extends AbstractController
 {
     #[Route('/', name: 'app_home')]
-    public function home(): Response
+    public function home(UserRepository $userRepository): Response
     {
         $services = array();
         $services[] = array("id" => 1, "title" => "FirstCode", "code" => "<?php example", "creator" => "Eric Mega", "release" => "02/03/2023");
         $services[] = array("id" => 2, "title" => "MediaManager", "code" => "public function newIllustration()", "creator" => "Steelwix", "release" => "02/03/2023");
         $services[] = array("id" => 3, "title" => "MessageGenerator", "code" => "getHappyMessage()", "creator" => "odmgidia", "release" => "02/03/2023");
         $services[] = array("id" => 4, "title" => "DateCompare", "code" => "compareWithToday()", "creator" => "Steelwix", "release" => "02/03/2023");
-        $user = $this->getUser();
+        $rawuser = $this->getUser();
+        try {
+            $serializer = new Serializer([new ObjectNormalizer()], [new JsonEncoder()]);
+            $user = $serializer->serialize($rawuser, 'json');
+        } catch (CircularReferenceException $e) {
+            $user = $serializer->serialize($rawuser, 'json', [
+                ObjectNormalizer::CIRCULAR_REFERENCE_HANDLER => function ($object) {
+                    return $object->getId();
+                }
+            ]);
+        }
         return $this->render('default/main.html.twig', ['user' => $user, 'services' => $services]);
     }
 }