Stats: 3,183,646 members, 7,921,405 topics. Date: Thursday, 15 August 2024 at 02:01 AM |
Nairaland Forum / Science/Technology / Programming / How Can I Loop This Data In Vuejs (431 Views)
Help Review This Data Analytics Project / I Need Help With This Data Analysis, It Is Urgent. / Vuejs Confirm Dialog Plugin (2) (3) (4)
How Can I Loop This Data In Vuejs by Tunechi5(m): 7:51am On Apr 04, 2023 |
this is my script
html template {{service}} returns this json if i do {{service.service_name}} it doesn't input anything |
Re: How Can I Loop This Data In Vuejs by niel63(m): 8:35am On Apr 04, 2023 |
If I am correct, your responseObject is an array containing the following: resources status data data which is an array is what you're meant loop through. Now, what you can do is, destructure your responseObject like this. const {resources, status, data} = responseObject.value[0] Remember your responseObject is an array. Then kiss your data anyhow you like. <li v-for="service in data"> {{service}} </li> I no test am ooo! Hope it works. Why do you like the options API? Have you tried the composite API? Your logic will look simpler using the <script setup> |
Re: How Can I Loop This Data In Vuejs by davien(m): 8:37am On Apr 04, 2023 |
Since axios returns a promise you can use .then() to further turn the response.data to just data then loop through the values you want with .map() and arrange how you want. Note: If the code you listed returns the json response to the console. You'll still need to JSON.parse(response.data) though I'm not that familiar with axios I typically use fetch API. |
Re: How Can I Loop This Data In Vuejs by Tunechi5(m): 8:40am On Apr 04, 2023 |
niel63: i get ReferenceError: responseObject is not defined at VueComponent.mounted |
Re: How Can I Loop This Data In Vuejs by niel63(m): 8:40am On Apr 04, 2023 |
davien: Async/Await, Try/Catch works better for me whethere using axios or fetch... besides, that's not where his problem is. |
Re: How Can I Loop This Data In Vuejs by niel63(m): 8:42am On Apr 04, 2023 |
Tunechi5: still await the response.data ure applying to the responseObject. |
Re: How Can I Loop This Data In Vuejs by davien(m): 8:43am On Apr 04, 2023 |
niel63:Alright, I'm new to asynchronous requests though I know you can still use try/catch for fetch responses also. I think it's responseObject[0].value you meant to tell him by the way. |
Re: How Can I Loop This Data In Vuejs by niel63(m): 8:44am On Apr 04, 2023 |
This is one thing with vue. E sweet ooo but it's not as straightforward as react. I like it still sha. |
Re: How Can I Loop This Data In Vuejs by Tunechi5(m): 8:47am On Apr 04, 2023 |
niel63:dont get you this my full code the second image is me hard coding the details it returs the json in browser
|
Re: How Can I Loop This Data In Vuejs by niel63(m): 9:29am On Apr 04, 2023 |
try const {resources, status, data} = await this.responseObject.value[0]; You forgot to put the "this". I dey road, I for help you check am well. Console log the destructured data not the response. |
Re: How Can I Loop This Data In Vuejs by Tunechi5(m): 10:11am On Apr 04, 2023 |
niel63:not working cannot read value of [0] |
Re: How Can I Loop This Data In Vuejs by arejibadz(m): 12:14pm On Apr 04, 2023 |
your code looks fine what you missing is response.data.responseObjectso just modify your code to this async mounted() { then put this in your template
this should work fine |
Re: How Can I Loop This Data In Vuejs by Tunechi5(m): 12:16pm On Apr 04, 2023 |
thanks @arejibadz your a life saver......been on this since yesternight..... thanks again |
Re: How Can I Loop This Data In Vuejs by arejibadz(m): 12:19pm On Apr 04, 2023 |
Tunechi5:cheers happy learning 1 Like |
(1) (Reply)
What Does It Cost To Build A Fintech Apps / Google Play Console Paid With Payday But Unable To Do Verification / Who Will Help Me With Top-quality Assignments?
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 21 |